CSS - Exclamation Mark Icon

Code example for creating an exclamation mark shape using HTML and CSS.

The HTML elements use a <div> tag with class name "exclamation-mark-icon" as the exclamation mark icon element, and have two child <div> tags as the top and bottom parts.

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

The CSS uses two polygons to create the exclamation mark.
This code example calculates the exclamation mark shape based on the custom property "--w" as the reference value for other values.

/* Container */
.exclamation-mark-icon {
	--w: 300px; /* Base Size */
	--angle: 20deg; /* Rotation */
	position: relative;
	width: var(--w);
	height: var(--w);
	box-sizing: border-box;
	transform: rotate(var(--angle));
}

/* Top */
.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;
}

/* Bottom */
.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;
}