見出しの前に三角形をつけてみよう

ホーム
BLOG
css
見出しの前に三角形をつけてみよう

css
2019.11.25

はじめに

見出しや、リストを使った時に、それぞれの前に右向きの三角形をつけたいのですが、画像じゃないとダメですか？

簡単な三角形でしたら、cssでも簡単に作ることができますよ。

cssで三角形作れるんですね。難しいですか？

そうですね。考え方がわかれば非常に簡単かと思います。
サンプルと合わせてご紹介したいと思います。

CSSで見出しの前に三角形をつけてみよう

CSSで見出しの前に三角形をつけてみましょう。
段階を踏んで説明を行なっていきたいと思います。
まず、HTMLは次のような構造を使いたいと思います。

<h4 class="triangle">見出しの前に三角形をつけよう</h4>

上記のHTMLにcssを当てていきたいと思います。
まず、１段階目として、見出しの前に四角形を作りましょう。
そのために、cssは次のように記述します。

h4.triangle{
 font-size:20px;
 position:relative;
 padding-left:25px;
}
h4.triangle:before{
 position:absolute;
 content:"";
 width:20px;
 height:20px;
 display:inline-block;
 border:1px solid red;
 top:13px;
 left:0;
}

大きさに応じて、topやpadding-leftなどは調整してください。
上記のcssをあてると次のようになります。

見出しの前に三角形をつけよう

上記のように、見出しの前に赤いボーダーがついた四角形がつきましたね。
このままでは、まだ三角形にはほど遠い見た目をしています。
次は四角形を塗りつぶしたいと思います。
しかし、ここで、背景を色で塗りつぶすわけではありません。
borderで塗り潰したいと思います。
borderで塗りつぶす際、作成した四角形の大きさを超えて欲しくありません。
borderが親要素の大きさを超えないようにする記事は、こちらになります。
cssをborderで塗りつぶすように追加で書き換えたいと思います。
beforeの要素だけ書き換えます。

h4.triangle:before{
 position:absolute;
 content:"";
 width:20px;
 height:20px;
 display:inline-block;
 border:10px solid red;//borderを太くしましょう。
 box-sizing:border-box;//親要素を超えないようにしましょう
 top:13px;
 left:0;
}

上記のcssをあてると次のようになります。

見出しの前に三角形をつけよう

赤い四角形が出来上がりましたね。ここでもまだ、ただの全部が赤い四角形で三角形とはほど遠い形をしていると思います。
次に左側だけborderの色を変えてみることを考えてみましょう。
cssを左側のborderの色だけ変更するように書き換えます。

h4.triangle:before{
 position:absolute;
 content:"";
 width:20px;
 height:20px;
 display:inline-block;
 border:10px solid red;
 box-sizing:border-box;
 border-left-color:blue;//左側を青くしてみました
 top:13px;
 left:0;
}

上記のようにborder-left-colorで青い色を指定してみました。
このcssをあてると次のようになります。

見出しの前に三角形をつけよう

上記のように左側に青い三角形が出来上がっているのがわかるかと思います。
あとは、この赤い部分を背景の色と同じ色にすることで、三角形になりそうですね。
cssのborderの色が赤いところを背景の色にするように書き換えます。

h4.triangle:before{
 position:absolute;
 content:"";
 width:20px;
 height:20px;
 display:inline-block;
 border:10px solid transparent;
 box-sizing:border-box;
 border-left-color:blue;
 top:13px;
 left:0;
}

上記のcssをあてると次のようになります。