我们大多数的小箭头都是用小图片来做的，这里分享一款用纯 CSS 写的小箭头，大家可以看看，以后会放出更多的 CSS 小箭头来供大家参考。
- <div class="pre-wrap">
- <div class="pre">
- <div class="pre1"></div>
- <div class="pre2"></div>
- </div>
- </div>
- <style>
- .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;
- }
- </style>
