CSS 小箭头

有缘结识使用CSS绘制的小箭头，发表出来跟大家分享一下：
图：

HTML代码：

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

 

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