css3箭头

使用rotate画出来

by Mike Lin

HTML

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

CSS

.demo{
  position:relative;
  width: 100px;
  height: 50px;
}
.arrow-right::after,.arrow-left::before,.arrow-down::after,.arrow-up::after{
  content: " ";
  display: inline-block;
  border-color: rgb(125,125,125);
  border-width: 2px 2px 0 0;
  border-style: solid;
  position: absolute;
  top: 50%;
  height: 8px;
  width: 8px;
}

/* 右向箭头 */
.arrow-right::after
{
  transform: rotate(45deg);
  margin-top: -4px;
  right: 16px;
}

/* 左向箭头 */
.arrow-left::before
{
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  margin-top: -4px;
  left: 8px;
}

/* 向下箭头 */
.arrow-down::after
{
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  margin-bottom: 4px;
  margin-left: 5px;
}

/* 向上箭头 */
.arrow-up::after
{
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  margin-bottom: 4px;
  margin-left: 5px;
}