CSS3组件化之单线箭头

<div class="parent-box">
<div class="top-arrow"></div>
<div class="right-arrow"></div>
<div class="bottom-arrow"></div>
<div class="left-arrow"></div>
</div>

.parent-box{
position: relative;
width: 500px;
height: 300px;
}
//箭头向上
.top-arrow {
position: absolute;
left: 50%;
top: 0;
overflow: hidden;
zoom: 1;
width: 12px;
height: 12px;
text-indent: -99999px;
border-left: 0.05rem solid #b2b2b2;
border-top: 0.05rem solid #b2b2b2;
transform: rotate(45deg);
-o-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
//箭头向右，类似 >
.right-arrow {
position: absolute;
right: 0;
top: 50%;
overflow: hidden;
zoom: 1;
width: 12px;
height: 12px;
text-indent: -99999px;
border-right: 0.05rem solid #b2b2b2;
border-top: 0.05rem solid #b2b2b2;
transform: rotate(45deg);
-o-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
//箭头向下
.bottom-arrow {
position: absolute;
right: 50%;
bottom: 0;
overflow: hidden;
zoom: 1;
width: 12px;
height: 12px;
text-indent: -99999px;
border-right: 0.05rem solid #b2b2b2;
border-bottom: 0.05rem solid #b2b2b2;
transform: rotate(45deg);
-o-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
//箭头向左，类似 <
.left-arrow {
position: absolute;
left: 0;
top: 50%;
overflow: hidden;
zoom: 1;
width: 12px;
height: 12px;
text-indent: -99999px;
border-left: 0.05rem solid #b2b2b2;
border-bottom: 0.05rem solid #b2b2b2;
transform: rotate(45deg);
-o-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}