CSS - 雷アイコン

HTMLとCSSを使用して雷アイコンの形を描画する方法のコード例です。

このHTMLコードは雷アイコンを描画する要素となる<div>タグのクラス名 "lightning-icon" を設定しています。

<div class="lightning-icon"></div>

疑似要素「before」と「after」で左右の三角形を作成しています。

CSSカスタムプロパティで基準値とする図形の横幅「--w」を指定しています。
「--w」を使って雷アイコンの形に必要なすべての値を計算します。

本体の「width」と「height」は描画には影響しませんが、作成する雷アイコンの縦横サイズが適用されます。

/* 雷アイコン */
.lightning-icon {
	--w: 300px; /* 基準サイズ */
	--angle: 0deg; 	/* 回転 */
	position: relative;
	width: var(--w);
	height: var(--w);
	transform: rotate(var(--angle));
}

/* 左のパーツ */
.lightning-icon::before {
	content: "";
	position: absolute;
	top: 0%;
	left: 50%;
	border-bottom: calc(var(--w) * 0.6) solid #ffa500;
	border-right: calc(var(--w) * 0.1) solid transparent;
	border-left: calc(var(--w) * 0.1) solid transparent;
	box-sizing: border-box;
	transform: rotate(40deg);
}

/* 右のパーツ */
.lightning-icon::after {
	content: "";
	position: absolute;
	top: -15%;
	left: 50%;
	border-bottom: calc(var(--w) * 0.6) solid #ffa500;
	border-right: calc(var(--w) * 0.1) solid transparent;
	border-left: calc(var(--w) * 0.1) solid transparent;
	box-sizing: border-box;
	transform-origin: center bottom;
	transform: rotate(-140deg);
}