問題 × 解決策

cssで三角形を作る方法

問題

cssのみで三角形を作りたい。

解決策

「width: 0; height: 0;」の要素を作り、borderの一辺以外を「transparent」で透過させる。

cssによる三角形の実現

簡易的な吹き出しなどで、三角形のパーツを使用する場面はよく遭遇するのではないでしょうか。
そんな時、cssで三角形を作り、作業の負担を軽減させましょう!

まず、HTMLの構築を行います。

divタグを構築します。
便宜上、ここではdivタグに「triangle」というクラスを設定しています。

<div class="triangle">
<p>下に三角形を表示させます。</p>
</div>

次にCSSの構築を行います。

divタグのクラス「triangle」に、「position: relative;」を設定します。
そして疑似要素afterを構築します。
「position: absolute;」で位置を調整し、幅も高さも0にして、「border」を設定します。
「border」はtop以外は「transparent」に設定して透過させます。

.triangle{
	position: relative;
	padding: 10px 15px;
	background-color: #fef5f2;
}
.triangle:after{
	content: "";
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	right: 0;
	bottom: -50px;
	left: 0;
	margin: auto;
	border-top: 25px solid #FCECE8;
	border-right: 10px solid transparent;
	border-bottom: 25px solid transparent;
	border-left: 10px solid transparent;
}

DEMOはこちら

下に三角形を表示させます。

ポイント!

「border」で一辺以外を透過させることで、線が斜めに切り取られ、三角の形状で出力されます。
上向きの三角形を作りたい場合は、bottom以外を「transparent」で透過すれば実現することができます。
応用の仕方次第で色々な場面で使えますので、ぜひ試してみてください。

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

one × two =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧