HTML

コピペで簡単 CSS で三角形を作る方法

コピペで簡単 CSS で三角形を作る方法

コピペで簡単 CSS で三角形を作る方法を紹介します。
例えば、画像を使わずに三角形を作りたいときや、CSS だけで吹き出しを作りたいときに便利な方法です。

CSS で三角形を作る方法

CSS だけで三角形を作る場合は、CSS セレクタの border を使います。
実際の見た目はこんな感じです。

ベースの HTML は次の通りです。

<div class="triangle"></div>

下向きの三角形を作るときの CSS の指定はこちら。

.triangle {
width: 0;
height: 0;
border: 30px solid transparent;
border-top-color: #E91E63;
}

ボーダーは上下左右それぞれが交わる箇所が斜めに表示されるので、その特性を利用して三角形を表現します。まずはボーダー要素だけを使うために widthheight の指定を 0 にします。

続いてボーダーのサイズとカラーを指定、サイズは任意の値を入れてください、カラーは transparent(透明)を指定します。
最後に、三角形の方向に合わせてカラーを指定します。今回は下向きの三角形なので、ボーダートップにカラーを指定します、簡単ですね。

まとめ

コピペで簡単 CSS で三角形を作る方法を紹介しました。

スポンサーリンク

合わせて読みたい関連記事