★纯CSS通过border实现三角形图形★

请勿抄袭本页面

---

代码说明

实现一个三角形图形，其原理请参阅之前的两个小例子，再次变通一下就实现了这个三角形，思路是将其余三个的颜色设置为透明或设置成与背景色一样的颜色，只保留最上边一个三角形，当然了，如果想实现其它开口方向的三角形，其方法也是通用的。可是, IE6下不支持透明，因此这里将余下三条边的border-style设置为dashed，即可达到透明的效果。转自烈火网

---

html代码

<style> #test4 { height:0; width:0; overflow: hidden; font-size: 0; line-height: 0; border-color:transparent transparent transparent purple; /*保留三个transparent(透明)，改变一个颜色则可绘制三角形，分别为上右下左块，改变对应值可改变三角形尖对的方向*/ border-style:solid dashed dashed dashed; border-width:30px; display:inline-block; } </style> <div id="test4"></div>

---

代码演示

---

[代码仅供参考，转载请注明出处]

---