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