CSSで三角形を作る

画像を使用せず、CSSで三角形をつくる方法をメモしておきます。

サンプルコード

まずは普通に三角形を作ってみます。
今回は吹き出し部分の三角形を疑似要素で作成します。

HTML

<div class="arrow arrow-top">吹き出しテキスト<br />上向き三角形</div>
<div class="arrow arrow-bottom">吹き出しテキスト<br />下向き三角形</div>
<div class="arrow arrow-left">吹き出しテキスト<br />左向き三角形</div>
<div class="arrow arrow-right">吹き出しテキスト<br />右向き三角形</div>

.arrowで枠組みを作って、.arrow-topなどで各向きの三角形をborderを使って作成します。

CSS

枠組み

.arrow {
	position: relative;
	width: 250px;
	margin: 20px auto;
	border-radius: 5px;
	border: #3498DB 2px solid;
	padding: 5px;
}

上向き

.arrow-top:after {
	/* 疑似要素用 */
	content: '';
	display: block;

	/* 三角形の配置 */
	position: absolute;
	top: -18px;
	left: 10px;

	/* 三角形の作成 */
	width: 0;
	height: 0;
	border: transparent 8px solid;
	border-bottom-color: #3498DB;
}

下向き

.arrow-bottom:after {
	/* 疑似要素用 */
	content: '';
	display: block;

	/* 三角形の配置 */
	position: absolute;
	bottom: -18px;
	right: 10px;

	/* 三角形の作成 */
	width: 0;
	height: 0;
	border: transparent 8px solid;
	border-top-color: #3498DB;
}

左向き

.arrow-left:after {
	content: '';
	display: block;

	/* 三角形の配置 */
	position: absolute;
	top: 10px;
	left: -18px;

	/* 三角形の作成 */
	width: 0;
	height: 0;
	border: transparent 8px solid;
	border-right-color: #3498DB;
}

右向き

.arrow-right:after {
	content: '';
	display: block;

	/* 三角形の配置 */
	position: absolute;
	bottom: 10px;
	right: -18px;

	/* 三角形の作成 */
	width: 0;
	height: 0;
	border: transparent 8px solid;
	border-left-color: #3498DB;
}

下図の左側が width, height 0pxで、border 8pxを指定した状態です。
borderの色を指定していないので、何も表示されません。
この状態でborder-bottomに色指定することで、右側のような上向きの三角形が表示されます。

CSSで三角形を作成するデモページ
　

border-widthを変更することにより、三角形の変形ができます。

HTML

<div class="triangle01"></div>
<div class="triangle02"></div>

.triangle01を縦方向に、.triangle02を横方向に引き延ばしてみます。

CSS

.triangle01 {
	/* 三角形の作成 */
	width: 0;
	height: 0;
	border: transparent 20px solid;
	border-bottom-color: #3498DB;
	border-bottom-width: 60px;
}

.triangle02 {
	/* 三角形の作成 */
	width: 0;
	height: 0;
	border: transparent 20px solid;
	border-bottom-color: #3498DB;
	border-left-width: 60px;
	border-right-width: 60px;
}

CSSで三角形を作成するデモページ2