CSS - Lightning Icon

Code example demonstrating how to draw a lightning icon using HTML and CSS.

This HTML code sets the class name 'lightning-icon' for the <div> element, which represents the lightning icon.

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

Creates left and right triangles using pseudo-elements 'before' and 'after'.

Defines the base value for the shape's width '--w' using CSS custom properties.
Calculates all necessary values for the lightning icon's shape using '--w'.

The 'width' and 'height' of the body do not affect the rendering but apply the dimensions for the lightning icon.

/* Lightning Icon */
.lightning-icon {
	--w: 300px; /* Base Size */
	--angle: 0deg; /* Rotation */
	position: relative;
	width: var(--w);
	height: var(--w);
	transform: rotate(var(--angle));
}

/* Left Part */
.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);
}

/* Right Part */
.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);
}