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+