★纯CSS用border绘制空心菱形★

请勿抄袭本页面

---

代码说明

通过CSS的border绘制空心菱形，这一个是最好理解的，只要设置div的边框颜色，然后设置宽度和高度就行了，不要被这复杂的图形吓怕啊，其实代码很简单。在以后还将有其它更神奇的效果。转自烈火网

---

html代码

<style> #test2 { height:20px; width:20px; border-color:orange green yellow purple; /*分别为上右下左块颜色*/ border-style:solid; border-width:40px; display:inline-block; } </style> <div id="test2"></div>

---

代码演示

---

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

---