<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css 边框 形状 </title> <style type="text/css"> #demo11 { border: 10px solid #000; border-left-color: #f00; width: 10px; height: 10px; } #demo12 { border: 10px solid #000; border-left-color: #f00; width: 0; height: 0; } #demo14 { border: 10px solid transparent; border-left: 20px solid #f00; width: 0; height: 0px; } #demo15{ position: relative; padding-left:10px; } #demo15:before { border: 10px solid transparent; border-left: 10px solid #f00; width: 0; height: 0; position: absolute; content: ' '; left: -3px; } #demo16{ position: relative; } #demo16:after, #demo16:before { border: 10px solid transparent; border-left: 10px solid #fff; width: 0; height: 0; position: absolute; top: 2px; right: -20px; content: ' ' } #demo16:before { border-left-color: #f00; right: -21px; } #demo { width: 100px; height: 100px; background-color: #ccc; position: relative; border: 4px solid #333; } #demo:after, #demo:before { border: solid transparent; content: ' '; height: 0; left: 100%; position: absolute; width: 0; } #demo:after { border-width: 9px; border-left-color: #ccc; top: 15px; } #demo:before { border-width: 14px; border-left-color: #333; top: 10px; } </style> </head> <body> 用CSS即可绘制出各种箭头，无需裁剪图片，甚至没有用到CSS3的东西。对浏览器支持良好。 <h4>基本原理</h4> 原理非常简单，通过截取border(边框)的部分“拐角”实现，几行CSS代码即可理解： <h4>一个梯形</h4> 当元素宽、高和边框的宽相近（等）时，改变某一边的颜色可以看到一个梯形； <div id="demo11"></div> <h4>一个三角形</h4> 当元素宽、高为零，且其他边为透明颜色时，可以形一个三角形。 <div id="demo12"></div> <h4>任意角度的三角形</h4> 改变各个边的宽度，即通过调整“边框”厚度可以配置出任意角度 <div id="demo14"></div> <h4>通过伪元素实现</h4> 三角形可以通过伪元素绘制出，而无需改变原来的DOM结构 <div id="demo15">文字内容</div> <h4>伪元素实现三角线箭头</h4> 通过伪元素绘制出的两个，一个与背景色相同覆盖部分红色箭头，形成三角线 <br /> <span id="demo16">文字内容</span> <h4>三角形跟矩形组合成提示框</h4> <div id="demo"></div> </body> </html> 提示：你可以先修改部分代码再运行。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三角</title> <style type="text/css"> span{display: block;min-width: 23px;padding: 0 5px;height: 22px;line-height: 22px;text-align: center;border: 1px solid blue;position: relative;} cite{font-weight: normal;font-style: normal;} b{border-style: solid;border-width: 6px 0 6px;border-color: #fff;border-right: 6px solid red;width: 0;height: 0;font-size: 0;line-height: 0;position: absolute;left: -7px;top: 5px;} s{border-style: solid;_border-style: dashed;border-width: 6px;border-color: transparent;border-right-width: 0;border-right: 6px solid #fff;width: 0;height: 0;font-size: 0;line-height: 0;position: absolute;top: -6px;left: -4px;} .span2{display: block;min-width: 23px;padding: 0 5px;height: 88px;line-height: 88px;text-align: center;border: 4px solid blue;position: relative;} .cite2{font-weight: normal;font-style: normal;} .b2{border-style: solid;border-width: 24px 0 24px;border-color: #fff;border-right: 24px solid red;width: 0;height: 0;font-size: 0;line-height: 0;position: absolute;left: -28px;top: 17px;} .s2{border-style: solid;_border-style: dashed;border-width: 24px;border-color: transparent;border-right-width: 0;border-right: 24px solid #fff;width: 0;height: 0;font-size: 0;line-height: 0;position: absolute;top: -24px;left: -15px;} </style> </head> <body> <div style="width:200px;margin:200px auto;"> <span> <cite>25</cite> <b><s></s></b> </span> </div> <div style="width:200px;margin:200px auto;"> <span class='span2'> <cite class='cite2'>25</cite> <b class='b2'><s class='s2'></s></b> </span> </div> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » css 画三角形 喜欢 (0)or分享 (0)
