css3画箭头

使用matrix属性画出来

by Mike Lin

HTML

<div class='demo'>
  <span class='arrow-common arrow-right'></span>
</div>
<div class='demo'>
  <span class='arrow-common arrow-left'></span>
</div>
<div class='demo'>
  <span class='arrow-common arrow-up'></span>
</div>
<div class='demo'>
  <span class='arrow-common arrow-down'></span>
</div>

CSS

.demo{
  width: 100px;
  height: 50px;
  position: relative;
}
.arrow-common:after {
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #C8C8CD;
    border-style: solid;
    position: absolute;
    top: 50%;
}
.arrow-right:after{
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    margin-top: -4px;
    right: 2px;
}
.arrow-left:after{
    -webkit-transform: matrix(-0.71, 0.71, 0.71, 0.71, 0, 0);
    transform: matrix(-0.71, 0.71, 0.71, 0.71, 0, 0);
    margin-top: -4px;
    left: 2px;
}
.arrow-up:after{
    -webkit-transform: matrix(0.71, -0.71, 0.71, 0.71, 0, 0);
    transform: matrix(0.71, -0.71, 0.71, 0.71, 0, 0);
    margin-top: -4px;
    left: 2px;
}
.arrow-down:after{
    -webkit-transform: matrix(0.71, 0.71, 0.71, -0.71, 0, 0);
    transform: matrix(0.71, 0.71, 0.71, -0.71, 0, 0);
    margin-top: -4px;
    left: 2px;
}