CSS - Cross Shape

An example code to create a cross shape using HTML and CSS.

Specify the class name as "cross" in the HTML element.

<div class="cross"></div>

Create a cross shape by using a pseudo-element "before" on the element that creates a rectangle.

Position the pseudo-element using "position: absolute" at the center both horizontally and vertically using "top" and "left" set to "50%".

Adjust the position to the center using "transform" with "translate(-50%, -50%)".

/* Cross */
.cross {
	position: relative;
	width: 60px;
	height: 250px;
	background: royalblue;
}

.cross::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 250px;
	height: 60px;
	background: royalblue;
}