【CSS】CSSのみで三角形を作る方法と吹き出しの作り方

2020.04.25 / 2020.04.25

この記事では、CSSのみで三角形を作る方法についてご紹介します。

一昔前までは画像を使っていたのに、今ではCSSだけで三角形を描くことができちゃうんです！

HTMLやCSSを勉強中の方や、ホームページ作成している方はぜひ参考にしてください。

三角形のサンプル例

HTML5とCSS3の事典で勉強してますけど、三角形を作るタグやプロパティは見たことないです。本当にCSSだけでできるんですか？

はい、もちろんできますよ。しかも簡単な方法でね。

まずは実際にどんな三角形ができるのか、サンプル例をいくつか下記に作りましたので確認してください。

上記の三角形はすべてCSSのみで作成しています。

このような三角形はどうやって作っているのか、記述したコードを見ながら考えてみましょう。

記述したコード

上記に表示している、三角形はCSSで描いています。

下記にそのコードを記しますので、どうやって書かれているのかご確認してください。

<div id="red-triangle"></div>
<div id="blue-triangle"></div>
<div id="orange-triangle"></div>

#red-triangle{
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 50px solid #F0897F;
}
#blue-triangle{
width: 0;
height: 0;
border: 50px solid transparent;
border-left: 50px solid #6aa7cd;
}
#orange-triangle{
width: 0;
height: 0;
border-bottom: 80px solid #f6da69;
border-right: 30px solid transparent;
border-top: 80px solid transparent;
border-left: 30px solid transparent;
}

見ていただくとわかるように、CSSプロパティはわずか「width」、「height」、「border」の3種類しか使っていないのです。

次は、どうやってこの3種類のプロパティで三角形を作るのか解説します。

CSSのみで三角形を作るコードの解説

三角形を作る場合は必ず「width」と「height」は0にします。縦と横に長さを持たない要素を作るということです。

そしてコードを見てわかるように、上・下・左・右の1つの方向以外をtransparentで透明にしています。

どの方向を残すかによって、三角形の向きが決まります。

それではどの方向を残せば、思い描く三角形ができるのか？

それは下記のプログラムコードと図形を見ればわかるはずです。

width: 0;
height: 0;
border-top: 100px solid #F0897F ; //赤
border-right: 100px solid #6aa7cd; //青
border-bottom: 100px solid #4caf50; //緑
border-left: 100px solid #f6da69; //黄

もうお気づきの方も多いと思いますが、下向き三角形（赤色）を残したい場合は、border-top以外をtransparentで透明に、左向き三角形（青色）を残したい場合は、border-right以外をtransparentで透明に、右向きや上向きも同様の考え方でやればいいのです。

いろいろな三角形とその応用

これで私もCSSで三角形が作れます。でも、正三角形以外の形も作れないんですか？

もちろん作れますよ。少し値を変更するだけで様々な形の三角形ができます。

下記にいろいろな形をした三角形や、それを応用した吹き出しなどを載せますので、気に入ったものがあればコードをコピーして使用してください。

縦に長い三角形

width: 0;
height: 0;
border-top: 80px solid #F0897F;
border-bottom: 80px solid transparent;
border-right: 30px solid transparent;
border-left: 30px solid transparent;

左右のborderの長さが、上下よりも短いので、三角形は縦に長くなります。

横に長い三角形

width: 0;
height: 0;
border-top: 30px solid transparent;
border-right: 80px solid transparent;
border-bottom: 30px solid #6aa7cd;
border-left: 80px solid transparent;

縦長の三角形とは逆に、左右の長さを上下よりも長くすることで、横に長い三角形を表現できるようになります。

扇形

width: 0;
height: 0;
border-top: 80px solid #4caf50;
border-right: 80px solid transparent;
border-bottom: 80px solid transparent;
border-left: 80px solid transparent;
border-radius: 100%;

あまり使う場面がなさそうですが、border-radiusを使用することで扇形を表現できます。

吹き出し

これは吹き出しです。

<div id="balloon"><p>これは吹き出しです。</p></div>

#balloon{
position: relative;
display: inline-block;
margin: 0 0 1.5em 0;
padding: 10px 10px;
min-width: 120px;
max-width: 100%;
font-size: 16px;
background: #f6da69;
}
#balloon:before{
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -15px;
border: 15px solid transparent;
border-top: 15px solid #f6da69;
}
#balloon p {
margin: 0;
padding: 0;
}

三角形を絶対配置でくっつけることにより、吹き出しを作ることができます。三角形の位置を変更することで、吹き出しの三角形は上下左右、どこにでもつけることができます。