スタイリッシュな矢印の作り方
こんにちは。今日はメモがてら「スタイリッシュな矢印の作り方」について書きます。
イメージはこんな感じです!
上部分だけに出っ張り?がついた矢印です。笑
自分でつくってみるまでは難しそうだと思っていたのですが、案外簡単にできることが分かりました^^
ではさっそくコードを見ていきましょう〜!
コーディング
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を書いています。
少し解説すると、矢印部分は毎度お馴染みの擬似要素で四角形を作ることでできます^^
以下簡単に流れです。
①擬似要素で透明の四角形を作る
②作りたいデザインに合わせて、擬似要素の2辺にボーダーをつける(今回は上と右)
③transform: skew;で傾けさせる
②作りたいデザインに合わせて、擬似要素の2辺にボーダーをつける(今回は上と右)
③transform: skew;で傾けさせる
ボーダーの幅を大きくすると、このように斜めが強調されるのでまた少し違った感じになります!
少しでも参考になれば幸いです!では今日はここまで〜〜
コメント