Singel HTML Element Heart

Since it is Valentine’s Day. Here’s a single HTML element of a heart that I’ve created.

HTML

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

Without going into any details. What makes it possible to create a shape like this, with just one HTML element, is the use of the :before and :after pseudo-elements.

CSS

html, body {
background: #000;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

.heart {
position: absolute;
left: -50px;
top: 0;
bottom: 0;
right: 0;
margin: auto;
width: 80px;
height: 100px;
background: transparent;
border-top-left-radius: 950px;
border-bottom-left-radius: 1300px;
transform: skew(0deg,15deg);
box-shadow: rgba(230, 76, 69, 0.8) -7px -3px 10px -2px;
}

.heart:before {
position: absolute;
top: -18px;
left: 62px;
width: 100%;
height: 100%;
content: '';
background: inherit;
border-top-right-radius: 950px;
border-bottom-right-radius: 1300px;
transform: skew(0deg,-30deg);
box-shadow: rgba(230, 76, 69, 0.8) 7px -3px 10px -2px;
}

.heart:after {
position: absolute;
top: 10px;
left: 20px;
width: 0%;
height: 0%;
content: '#';
color: #000;
font-size: 70px;
transform: skew(-1deg,-15deg);
text-shadow: 72px 4px 3px rgba(230, 76, 69, 0.8);
}