1 <!DOCTYPE html> 2 <html> 3 <title> 边框属性实现三角箭头及其原理</title> 4 <meta charset="utf-8" /> 5 <head> 6 <style> 7 #demo { border: 10px solid #333; border-left-color: #f00; width: 10px; height: 10px; /*border-color:#333 transparent transparent ;*/ } 8 #demo2 { border: 10px solid transparent; border-left-color: #f00; width: 0; height: 0; } 9 #demo3 { border: 10px solid transparent; border-top-color: #f00; width: 0; height: 0; } 10 #demo4 { border: 10px solid transparent; border-bottom-color: #f00; width: 0; height: 0; } 11 #demo5 {border-width:0 6px 6px; border-style:dashed dashed solid; border-color:transparent transparent #555} 12 #demo6 {border-width: 16px; border-style:solid; border-color:transparent transparent #555} 13 </style> 14 15 </head> 16 <body> 17 18 <h3>边框属性实现三角箭头及其原理</h3> 19 <p>基本原理<br>原理非常简单，通过截取border(边框)的部分“拐角”实现，几行CSS代码即可理解：<br> 20 一个梯形<br>当元素宽、高和边框的宽相近（等）时，改变某一边的颜色可以看到一个梯形；</p> 21 <p id="demo"><p> 22 23 <h3>一个三角形,当元素宽、高为零，且其他边为透明颜色时，可以形一个三角形。</h3> 24 <p id="demo2"><p> 25 26 <h3>把它变成往下的三角</h3> 27 <p id="demo3"><p> 28 29 <h3>同理把它变成往上的三角</h3> 30 <p id="demo4"><p> 31 32 <h3>其他一些方法：如下(需要注意的时，这里的实现方法是没有使用width和height属性的)</h3> 33 <i id="demo5"></i> 34 35 <h3>改变点css: 体会，实现三角的重点属性是border-color的属性</h3> 36 <i id="demo6"></i> 37 38 39 </body> 40 </html> 41