CSSだけで細い矢印を作る方法【下向き矢印・右向き矢印】

2019/12/04

こんにちは、ゆうやです！

本記事では、

「かっこいいWebサイトでよく見かける細い矢印を作りたいのです！」

「画像を使わずに今風のイケてる矢印を作るにはどうしたらいいですか？」

という方に向けて作り方を紹介します！

CSSだけで細い矢印を作る方法
まとめ

CSSだけで細い矢印を作る方法

今回作る矢印の完成イメージ

下向き矢印・右向き矢印

実際にどんな矢印なのか確認したい方はこちらからご覧になってください(^o^)

デモページ

下向き矢印の作り方

ポイントは、

親要素にposition:relative指定
子要素にspanタグを3つ配置
spanタグはabsolute指定
「:nth-of-type(n)」で指定番数目のspanタグにスタイルを当てる

下向き矢印のHTML構造

index.html

<div class="Arrow">
   <span class="Arrow-Item"></span>
   <span class="Arrow-Item"></span>
   <span class="Arrow-Item"></span>
 </div>

下向き矢印のCSS

index.css

.Arrow{
  margin-left 14px; /*なくてもOK*/
  position: relative;
  height: 80px;
}
.Arrow-Item{
  position: absolute;
  left: 1px;
  display: block;
  width: 2px;
  border-radius: 1px;
  background: #e2264d;
}
.Arrow-Item:nth-of-type(1){
  top: 0;
  height: 80px;
}
.Arrow-Item:nth-of-type(2){
  bottom: 0;
  height: 30px;
  transform: rotate(30deg);
}
.Arrow-Item:nth-of-type(3){
  bottom: 0;
  height: 32px;
  transform: rotate(90deg) translateX(-10px);
}

右向き矢印の作り方

ポイントは、

親要素にrelative指定
親要素の疑似要素（before、after）にabsolute指定
疑似要素にスタイルを当てる

右向き矢印のHTML

index.html

<a href="#" class="Text">送信</a>

右向き矢印のCSS

index.css

.Text{
  margin-top 20px; /*なくてもOK*/
  position: relative;
  border: 1px solid #e2264d;
  width: 120px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #e2264d;
  font-size: 20px;
}
.Text:before,
.Text:after{
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  height: 1px;
  background: #e2264d;
}
.Text:before{
  width: 60px;
  transform: translate(30px, 0px);
}
.Text:after{
  width: 15px;
  transform-origin: right center;
  transform: translate(30px, 0px) rotate(25deg);
}