CSS - ビックリマーク

HTMLとCSSでビックリマークの形状を作成するコード例です。

HTML要素には、ビックリマークアイコンの要素となる<div>タグにクラス名 "exclamation-mark-icon" を設定し、2つの子要素となる<div>タグを配置して上部と下部のパーツとしています。

<div class="exclamation-mark-icon">
	<div></div>
	<div></div>
</div>

CSSでは2つの多角形を利用してビックリマークを作成しています。
このコード例ではビックリマークの形状を整形する為の計算をCSSのカスタムプロパティ「--w」を基準値として他の値を計算します。

/* コンテナ */
.exclamation-mark-icon {
	--w: 300px; /* 基本サイズ */
	--angle: 20deg; /* 回転 */
	position: relative;
	width: var(--w);
	height: var(--w);
	transform: rotate(var(--angle));
}

/* 上部 */
.exclamation-mark-icon div:nth-child(1) {
	position: absolute;
	width: 100%;
	height: 100%;
}

.exclamation-mark-icon div:nth-child(1)::before {
	content: "";
	position: absolute;
	top: 7.5%;
	left: 50%;
	transform: translateX(-50%);
	width: 20%;
	border-left: calc(var(--w) * 0.07) solid transparent;
	border-right: calc(var(--w) * 0.07) solid transparent;
	border-bottom: calc(var(--w) * 0.1) solid #ff6347;
	box-sizing: border-box;
}

.exclamation-mark-icon div:nth-child(1)::after {
	content: "";
	position: absolute;
	top: 16.5%;
	left: 50%;
	transform: translateX(-50%);
	width: 20%;
	border-top: calc(var(--w) * 0.55) solid #ff6347;
	border-left: calc(var(--w) * 0.07) solid transparent;
	border-right: calc(var(--w) * 0.07) solid transparent;
	box-sizing: border-box;
}

/* 下部 */
.exclamation-mark-icon div:nth-child(2) {
	position: absolute;
	width: 100%;
	height: 100%;
}

.exclamation-mark-icon div:nth-child(2)::before {
	content: "";
	position: absolute;
	bottom: 15%;
	left: 50%;
	transform: translateX(-50%);
	width: 15%;
	border-left: calc(var(--w) * 0.05) solid transparent;
	border-right: calc(var(--w) * 0.05) solid transparent;
	border-bottom: calc(var(--w) * 0.07) solid #ff6347;
	box-sizing: border-box;
}

.exclamation-mark-icon div:nth-child(2)::after {
	content: "";
	position: absolute;
	bottom: 8.1%;
	left: 50%;
	transform: translateX(-50%);
	width: 15%;
	border-top: calc(var(--w) * 0.07) solid #ff6347;
	border-left: calc(var(--w) * 0.05) solid transparent;
	border-right: calc(var(--w) * 0.05) solid transparent;
	box-sizing: border-box;
}