Pure CSS implementation of small arrows case

Most of our small arrows are done with small pictures, here to share a small arrow with a pure CSS, we can see, later will release more CSS small arrows for your reference.

<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 {
/***** set border-style:dashed, IE6 support border transparent *****/
Border-style:dashed solid dashed dashed;
/***** Set container height to 0*****/
width:0;
height:0;
/***** Remove the IE6 default height and set the following properties *****/
line-height:0;
font-size:0;
Overflow:hidden;

}
</style>