How do I create a heart shape using HTML and CSS?

Answer 1

Hello,

You can create a heart shape using a single HTML element and using the :before and :after pseudo elements.

Here's demo in CodePen: https://codepen.io/stellina91/pen/grIHf

This is the HTML and CSS used in that demo:

HTML

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

CSS

.heart{

position: relative;

width: 100px;

height: 90px;

}

.heart:before, .heart:after{

position: absolute;

content: "";

left: 50px;

top: 0;

width: 50px;

height: 80px;

background: #fc2e5a;

border-radius: 50px 50px 0 0;

transform: rotate(-45deg);

transform-origin: 0 100%;

}

.heart:after{

left: 0;

transform: rotate(45deg);

transform-origin :100% 100%;

}

The author of that demo is Micol Bellantoni.