纯css 箭头,纯CSS实现小箭头的案例

小箭头我们许多的美工前端使用的是图片来实现了，如果我们不使用图片直接使用css要如何来实现呢，下面我们来看一篇关于纯CSS实现小箭头的方法吧，具体如下。

我们大多数的小箭头都是用小图片来做的，这里分享一款用纯CSS写的小箭头，大家可以看看，以后会放出更多的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;

}