小箭頭我們許多的美工前端使用的是圖檔來實作了，如果我們不使用圖檔直接使用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 solid dashed dashed;
width: 0;
height: 0;
line-height: 0;
font-size: 0;
overflow: hidden;
}