CSS - Heart Shape

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

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

<div class="heart"></div>

To create a heart shape, you can use pseudo-elements "before" and "after" to simulate the shape.

By creating shapes with these pseudo-elements and overlapping them, you can form the heart shape.

/* Heart */
.heart {
	--w: 300px; /* Base size */
	--angle: 0deg; /* Rotation */
	position: relative;
	width: var(--w);
	height: var(--w);
	transform: rotate(var(--angle));
}

.heart::before {
	content: "";
	position: absolute;
	top: 12.5%;
	left: 50%;
	width: 50%;
	height: 80%;
	background: #4169e1;
	border-radius: calc(var(--w) / 3) calc(var(--w) / 4) 0 0;
	box-sizing: border-box;
	transform-origin: 0 100%;
	transform: rotate(-45deg);
	opacity: 0.7; /* For visibility during development */
}

.heart::after {
	content: "";
	position: absolute;
	top: 12.5%;
	right: 50%;
	width: 50%;
	height: 80%;
	background: #ff1493;
	border-radius: calc(var(--w) / 4) calc(var(--w) / 3) 0 0;
	box-sizing: border-box;
	transform: rotate(45deg);
	transform-origin: 100% 100%;
	opacity: 0.7; /* For visibility during development */
}