HTML/CSS

【CSS】タグ風矢印の作り方!【コピペで簡単】

更新日:

CSSタグ風矢印の作り方

CSSのみで実装するタグ風矢印のサンプルです。
見出しやポイント、タグクラウドでよく使われているのを見かけますね。

 

吹き出しを作るCSSに似ていますが、タグ風矢印はより簡単に表現できます。

 

▼サンプル

See the Pen TAG by YUU (@webjo_yuu) on CodePen.

 

それでは、順番に見ていきましょう~。

 

CSSのみで作るタグ風矢印

まずはHTML部分。

これだけです。

 

つづいてCSS部分。記述はアルファベット順です。

 

ポイントは3つ。

ポイント

  • 可変幅になるように display: inline-block; を指定
  • line-height に height と同じ値を指定し、テキストを中央表示
  • position: relative; を指定

 

border-radius では、左上と左下のみ角丸になるように指定しています。

逆向きのタグ(矢印)の場合は、 border-radius: 左上 右上 右下 左下; の順で、右上と右下に角丸を指定しましょう。

 

※ 今回はテキストが1行のみなので line-height で中央表示を実装していますが、複数行になる場合は display: flex; などでの対応が必要です。

 

 

右側の三角部分のCSSです。疑似要素の::beforeで表現します。

 

ポイントは1つ。

ポイント

  • position: absolute; top: 0; right: -35px; で配置を固定 ※rightはheightの半分 = borderの太さ分だけずらす

吹き出しの時と違い高さいっぱいの三角が必要なので、top: 0; になります。

 

※  cssで作る三角形の概念については、次回お話したいと思います!

 

以上でタグの完成です。とっても簡単ですね!

 

 

残る::afterは左側の装飾部分ですのでお好みでどうぞ。

 

ポイント

  • 重ねて配置しているため、border-radiusは本体と揃える。今回は左上と左下
  • widthの分だけ本体(.tags)のpaddingを増やすとテキストがきれいに中央配置されます。今回は左に装飾を入れているので、padding-leftを1em分増やしています。

 

 

あとがき

見出しやタグのCSSデザインは使う機会がとても多いので、覚えておくと良いですね。

 

▼CSSで作る三角形の詳しい説明や応用編はこちらの記事で紹介しています

CSS
CSS三角形の作り方
【CSS】三角形の作り方!初級編+応用編

前回の【CSS】タグ風矢印の作り方!でも使用した、CSSで作る三角形の作り方と原理を説明します。 前回はタグでしたが、吹き出しでもよく使われていますね。   普段コピペで済ませている方も多い ...

続きを見る

 

-HTML/CSS
-, ,

Copyright© Webjo blog , 2020 All Rights Reserved.