CSS だけで矢印を作る方法

Last update 
/ Posted by Takumi Hirashima

CSS だけで矢印を作る方法を、簡単に実装できるようにまとめました。
細かな位置は適宜調整してください。

<div class="top">TOP</div>
<div class="right">RIGHT</div>
<div class="bottom">BOTTOM</div>
<div class="left">LEFT</div>
.top,.right,.bottom,.left { position: relative; padding-left: 14px; }
.top:after {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width:  6px;
  height: 6px;
  margin: -3px 0px 0px 0px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  content: "";
}

.right:after {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width:  6px;
  height: 6px;
  margin: -3px 0px 0px 0px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  content: "";
}

.bottom:after {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width:  6px;
  height: 6px;
  margin: -3px 0px 0px 0px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  content: "";
}

.left:after {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width:  6px;
  height: 6px;
  margin: -3px 0px 0px 0px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  content: "";
}
スポンサーリンク