CSS模拟小箭头

图：

HTML代码：

?

1 2 3 4 5 6

<div class="pre-wrap">     <div class="pre">         <div class="pre1"></div>         <div class="pre2"></div>     </div> </div>

 

CSS代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

.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;   }