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

CSSのみで三角形を作る方法

この記事では、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;
}

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

まとめ

それでは今回紹介した「CSSのみで三角形を作る方法と吹き出しの作り方」の重要なポイントをおさらいしましょう。

POINT

widthとheightは0にする

borderの4方向のうち3つをtransparentで透明にする

三角形を絶対配置で位置づけすることで、吹き出しも作ることができる

便利になったCSSの使い方をぜひ覚えて、サイトに使ってみてください。

inserted by FC2 system