コラム

CSSだけで三角形を作成する方法をご紹介します。

Webサイトには三角形を使ってデザインされている部分があります。

まずは基本的な作成方法をマスターして、色々な三角形を作成できるようになりましょう！

よくある三角形の例

Webサイトには以下の場所で三角形がよく使われます。

・吹き出し

・矢印

CSSだけで三角形を作るには「borderプロパティ」を使う

結論から言うと、CSSの「border」プロパティで作成可能です。 borderプロパティは要素の枠線を設定するプロパティで、三角形の作成には以下の性質を利用します。 「枠線が重なる部分は、斜めの切り口になる」 これによって、三角形の斜めの線を表現できます。

デモ

画像１の三角形を実際に作成してみます。以下の手順を踏むとスムーズにいきます。 ・三角形にしたい要素に「display: inline-block;」を適用する ・borderプロパティで三角形の形を調整する

三角形を表示するときのHTML

See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.

非常にシンプルです。 三角形を表現するための要素が1つあれば大丈夫です。 今回はdivタグで作成しますが、疑似要素で作成することもあります。

三角形を表示するときのCSS

CSSは、以下のプロパティを使います。 border-top border-bottom border-left border-right 今回は、下向きの三角形なので、border-bottomは使いません。

ポイント１：「display: inline-block;」

三角形は様々なところに配置されるので、inline-blockにすると柔軟に位置調整ができます。 ※ inlineだとborderがうまく効かないので注意しましょう。

ポイント２：borderの色を透明（transparent）にする

border-leftとborder-rightを透明にすると、border-topの色だけ目に見えるようになり、三角形が表現できます。

ポイント３：枠線の太さで三角形の大きさを決める

borderプロパティの「〇〇px」で三角形の大きさや形を決めます。今回は、二等辺三角形となります。

デモの解説

実際は、画像２のように枠線があります。

網掛けの部分が透明(transparent)なので、赤色の部分が三角形に見えます。

borderの太さを調整すれば、色々な種類の三角形ができます。

是非一度、太さを変えて確認してみてください。

今回説明したのは三角形の作り方のほんの一部です。

今回の内容を使えば色々な三角形が作成できるので、是非トライしてみましょう！