スタイリッシュな矢印の作り方

こんにちは。今日はメモがてら「スタイリッシュな矢印の作り方」について書きます。

イメージはこんな感じです！

上部分だけに出っ張り？がついた矢印です。笑

自分でつくってみるまでは難しそうだと思っていたのですが、案外簡単にできることが分かりました＾＾
ではさっそくコードを見ていきましょう〜！

コーディング

HTML編

      <div class="contSect">
        <div class="inner">
          <div class="m-btn01"><a href="#">詳しくみる</a></div>
        </div>
      </div>
      <!-- /.contSect -->

CSS編

.m-btn01 {
  line-height: 1.3;
}

.m-btn01 a {
  position: relative;
  display: inline-block;
  background: #1700c5;
  text-decoration: none;
  color: #fff;
}

.m-btn01 a:after {
  position: relative;
  display: inline-block;
  margin-left: 10px;
  vertical-align: middle;
  content: "";
  transform: skew(45deg);/*ポイント*/
}

@media only screen and (min-width: 769px) {
  .m-btn01 {
    font-size: 16px;
  }
  .m-btn01 a {
    padding: 1.25em 2.18em;
  }
  .m-btn01 a:after {
    width: 1.56em;
    height: 0.3em;
    margin-top: -0.3em;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
  }
}

メディアクエリでPC部分のCSSを書いています。

少し解説すると、矢印部分は毎度お馴染みの擬似要素で四角形を作ることでできます＾＾

以下簡単に流れです。

ボーダーの幅を大きくすると、このように斜めが強調されるのでまた少し違った感じになります！

少しでも参考になれば幸いです！では今日はここまで〜〜