CSS - Star Shape

This is an example of CSS code to create a star shape.

In HTML, the element that represents a star shape is a <div> with the class attribute set to "star".

<div class="star"></div>

Using the main element and pseudo-elements 'before' and 'after', three triangles are created and their position and angle are adjusted to form a star shape.

In the code example, the color and transparency of the drawn parts are changed to make the shape easier to see.

.star {
	position: relative;
	width: 0px;
	height: 0px;
	border-bottom: 50px solid #ff6347;
	border-right: 75px solid transparent;
	border-left: 75px solid transparent;
	transform: rotate(-37deg);
	/* transparency to check shape */
	opacity: 0.8;
}

.star::before {
	content: "";
	position: absolute;
	top: 0;
	left: -75px;
	border-bottom: 50px solid #00bfff;
	border-right: 75px solid transparent;
	border-left: 75px solid transparent;
	transform: rotate(-71.5deg);
	/* transparency to check shape */
	opacity: 0.8;
}

.star::after {
	content: "";
	position: absolute;
	top: 0;
	left: -75px;
	border-bottom: 50px solid #ff8c00;
	border-right: 75px solid transparent;
	border-left: 75px solid transparent;
	transform: rotate(71.5deg);
	/* transparency to check shape */
	opacity: 0.8;
}