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

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

みなさんこんにちは、ゆうやです!

Yahoo!検索大賞2019」が発表されモデル部門大賞にゆきぽよさんが選ばれた今日このごろ、いかがお過ごしでしょうか。

めちゃくちゃかわいいです!

「バチェラー」は見たことないんですが、「さんま御殿」に出ていたゆきぽよさんを見て好きになりました笑

ps さんま御殿毎週録画していつも楽しませてもらってます(^o^)

参考 ネット検索 ことし急上昇した人物や作品は… NHKニュース 参考 Yahoo!検索大賞で尾田栄一郎が作家部門賞を受賞、鬼滅の刃がアニメ部門賞に(イベントレポート)コミックナタリー

さて本記事では、

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

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

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

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

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

html・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>
index.css

■右向き矢印の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);
}

まとめ

いかがでしたでしょうか。

「なーんだ〜そんな簡単に矢印実装できるんか!やってみよ」

となっていただけていたら幸いです!

最後までご高覧いただきありがとうございました!!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です