三角形を作る方法

2017/06/22

CSSで三角形を作るには、border関連のプロパティを活用しましょう。

サンプルコード

div {
	border: 50px solid transparent ;
	width: 0px ;
	height: 0px ;
	border-bottom-color: red ;	/* 上向きの場合 */
}

デモ

上向き

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
div {
	border: 50px solid transparent ;
	width: 0px ;
	height: 0px ;
	border-bottom-color: red ;
}
	</style>
</head>
<body>
<div></div>
</body>
</html>

左向き

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
div {
	border: 50px solid transparent ;
	width: 0px ;
	height: 0px ;
	border-right-color: red ;
}
	</style>
</head>
<body>
<div></div>
</body>
</html>

下向き

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
div {
	border: 50px solid transparent ;
	width: 0px ;
	height: 0px ;
	border-top-color: red ;
}
	</style>
</head>
<body>
<div></div>
</body>
</html>

右向き

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
div {
	border: 50px solid transparent ;
	width: 0px ;
	height: 0px ;
	border-left-color: red ;
}
	</style>
</head>
<body>
<div></div>
</body>
</html>

備考

三角形の正体は枠線です。枠線の1方向だけに色を付けると三角形になります。まずは横幅と高さが0pxの要素に枠線を付けてみましょう。ちょうど正方形になります。

div {
	width: 0 ;
	height: 0 ;
	border: 50px solid #000 ;
}

次に各方向の色を変更してみましょう。そうすると枠線がどうなっているか分かります。

div {
	width: 0 ;
	height: 0 ;
	border: 50px solid #000 ;

	border-top-color: red ;
	border-right-color: blue ;
	border-bottom-color: green ;
	border-left-color: purple ;
}

残したい以外の方向の色を透明にしてしまえば、三角形の完成ですね。

div {
	width: 0 ;
	height: 0 ;
	border: 50px solid #000 ;

	border-top-color: red ;
	border-right-color: transparent ;
	border-bottom-color: transparent ;
	border-left-color: transparent ;
}