KOMPX.COM or COMPMISCELLANEA.COM   

Heart shape in CSS

Drawing a heart shape in CSS, not using canvas, SVG or images. Just one HTML-element and pseudo-elements ::before and ::after.

HTML code:


<div class="example">
	<div></div>
</div>

CSS code:


.example div {
	height: 68px;
	width: 80px;
}
.example div:before {
	content: "";
	position: absolute;
	left: 40px;
	width: 40px;
	height: 68px;
	border-radius: 40px 40px 0 0;
	transform: rotate(-45deg);
	transform-origin: 0 100%;
	background: #c00;
}
.example div:after {
	content: "";
	position: absolute;
	left: 0;
	width: 40px;
	height: 68px;
	border-radius: 40px 40px 0 0;
	transform: rotate(45deg);
	transform-origin: 100% 100%;
	background: #c00;
}

Browser support
Windows
Internet Explorer 10.0+
Firefox 16.0+
Google Chrome
Opera 12.1+
Linux
Firefox 16.0+
Google Chrome / Chromium
Opera 12.1+
More