图：HTML代码： 复制代码代码如下: <div class="pre-wrap"> <div class="pre"> <div class="pre1"></div> <div class="pre2"></div> </div> </div> CSS代码： 复制代码代码如下: .pre-wrap { width: 200px; height: 120px; margin: 50px auto 0; border: 2px solid #F00; border-radius: 4px; position: relative; } .pre { width: 80px; height: 80px; position: absolute; top: 20px; left: 40px; } .pre1 { border-width: 40px; border-color: transparent #F30 transparent transparent; } .pre2 { border-width: 40px; border-color: transparent #FFF transparent transparent; position: relative; top: -80px; left: 15px; } .pre1, .pre2 { /*****设置border-style:dashed;使ie6支持border透明*****/ border-style: dashed solid dashed dashed; /*****设置容器宽高为0*****/ width: 0; height: 0; /*****去掉ie6下默认高度，设置以下属性*****/ line-height: 0; font-size: 0; overflow: hidden; }

　　推荐阅读

　　使用不带单位的line-height

有的时候，我们为了实现单行文字的垂直居中，会给line-height一个和height相同的固定的值；有的时候，我们为了调整特定的某段文字的行间距，通常会考虑使用百分比或者相对尺寸的em。或许是习惯，于是我们都习惯了>>>详细阅读

本文标题：CSS模拟小箭头的实现代码

地址：http://www.17bianji.com/kaifa2/CSS/16492.html

 1/2    1