★纯CSS用border绘制立体矩形★

请勿抄袭本页面

---

代码说明

生成立体的菱形效果，代码编写过程中要注意，依次设置overflow, font-size, line-height，因为, 虽然宽高度为0, 但在IE6下会具有默认的字体大小和行高, 导致盒子呈现被撑开的长矩形，因此要把字体和行高重新定义为0，避开各大浏览器的兼容问题。转自烈火网

---

html代码

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

---

代码演示

---

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

---