[CSS] HTMLとCSSを使って三角形を作成する方法

こんにちは、@yoheiMuneです。
今日は、HTMLとCSSを使って三角形を作成する方法をブログに書きたいと思います。
マークアップを仕事にしている人には当たり前と思うかもしれませんが、自分はこの実装を知ってびっくりだったのでブログに残したいと思います。

HTMLとCSSで三角形を作成する

三角形の作成方法はいろいろとあるかと思いますが、今回はBorderを使った三角形を作成します。

（作成例）


具体的な実装内容は以下となります。

<style type="text/css">
.triangle {
  /* 要素自体の大きさは不要のため、0に設定する */
  width: 0px;
  height: 0px;
  /* border-topとborder-bottomの太さを同一にすると、三角形の頂点が真ん中になる */
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  /* border-leftの大きさを大きくすると、三角形は横に大きくなる */
  border-left: 30px solid #ffff00;
  border-right: 0px solid transparent;
}
</style>
<div class="triangle"></div>

上記の実装のように上下左右の線の色と太さを変えることで、三角形を表現できます。
これはすごいと初めて知ったときには驚きました。

三角形のバリエーション

他にもいろいろと三角形のバリエーションを紹介します。
Borderの設定値によりどんな変化になるのかの理解の手助けになれば幸いです。


■横幅が長い三角形

.triangle {
  width: 0px;
  height: 0px;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  /* border-leftの値を大きくすると、横長になる */
  border-left: 100px solid #ff00ff;
  border-right: 0px solid transparent;
}

■縦幅が長い三角形

.triangle {
	width: 0px;
	height: 0px;
	/* topとbottomを大きくすると縦長になります */
	border-top: 100px solid transparent;
	border-bottom: 100px solid transparent;
	border-left: 30px solid #c15432;
	border-right: 0px solid transparent;
}

■三角形の頂点が上にずれた三角形

.triangle {
  width: 0px;
  height: 0px;
  /* border-topの値をborder-bottomより小さくすると、頂点が上になる */
  border-top: 10px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 30px solid #00ffff;
  border-right: 0px solid transparent;
}

■上が頂点の三角形

.triangle {
	width: 0px;
	height: 0px;
	/* 上下左右の値を入れ替えると、三角形の向きが自由自在 */
	border-top: 0px solid transparent;
	border-bottom: 30px solid #0fa012;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	margin-left: 20px;
}

■左が頂点の三角形

.triangle {
	width: 0px;
	height: 0px;
	/* 上下左右の値を入れ替えると、三角形の向きが自由自在 */
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 0px solid transparent;
	border-right: 30px solid #48c8d6;
	margin-left: 20px;
}

■下が頂点の三角形

.triangle {
	width: 0px;
	height: 0px;
	/* 上下左右の値を入れ替えると、三角形の向きが自由自在 */
	border-top: 30px solid #4859d6;
	border-bottom: 0px solid transparent;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	margin-left: 20px;
}

最後に

この三角形を:before、:after疑似要素で利用すれば、吹き出しとかも作れちゃう感じですね。 吹き出しの具体的な実装は、今後のブログでやってみたいと思います。

最後までご覧頂きましてありがとうございました。