October
17

2017

cssで矢印を作ろう

cssを使って矢印を作ってみよう!


cssを使った矢印の作り方をご紹介します。今回は5種類の矢印サンプルをご用意しました。
↓以下が実際のソースサンプルです。

▼CSS


.arrow1{
  position: relative;
  width: 200px;
  height: 50px;
    margin-bottom: 50px;
  border-top: 8px solid #5bc0de;
  border-right: 8px solid #5bc0de;
  box-sizing: border-box;
}

.arrow1:after{
  content: "";
  position: absolute;
  bottom: -14px;
  right: -17px;
  border-top: 14px solid #5bc0de;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
}
.arrow2{
    position: absolute;
    display: inline-block;
    padding: 0 0 0 16px;
      margin-bottom: 50px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
}
.arrow2:before{
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
    box-sizing: border-box;
    width: 12px;
    height: 12px;;
    border: 1px solid #ff0000;
    -webkit-border-radius:25%;
    border-radius: 25%;
}
.arrow2:after{
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
    left: 5px;
    box-sizing: border-box;
    width: 3px;
    height: 3px;
    border: 3px solid transparent;
    border-left: 3px solid #ff0000;
}
.arrow3{
  position: relative;
  display: inline-block;
  padding-left: 20px;
}

.arrow3:before{
  content: '';
  width: 6px;
  height: 6px;
  border: 0px;
  border-top: solid 2px #5bc0de;
  border-right: solid 2px #5bc0de;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -4px;
}
.arrow4{
  width: 0px;
  border-color: #d9534f;
  border-style: solid;
  border-width: 30px;
  border-left-color: transparent;
  border-top-color: transparent;
  border-right-color: transparent;
}
.arrow5 {
  display:inline-block;
  height:40px;
  width:80px;
  background-color:#5bc0de;
  position:relative;
  top:40px;
}

.arrow5:before {
  position:absolute;
  content:"";
  width:0;
  height:0;
  border:60px solid transparent;
  border-left:60px solid #5bc0de;
  left:80px;
  top:-37px;
}
 


▼HTML

        <h2>矢印</h2>
    <div class="arrow1"></div>
    <h2>再生ボタン風</h2>
    <div class="arrow2"></div>
    <h2>くの字型矢印</h2>
    <div class="arrow3"></div>
    <h2>上向き矢印</h2>
    <div class="arrow4"></div>
    <h2>一般的な大きな矢印</h2>
    <div class="arrow5"></div>
 

今回、参考にさせていただいたのは、
hyperspace』さんです。
ありがとうございます。

デモページは、こちら