From a CSS point of view, a heart shape is actually a combination of two circles and a square rotated at an angle of 45 degrees. And this can be very easily achieved with a little HTML & CSS.
See the following image:
To create a heart shape using CSS, you have to follow the below three steps:
- Draw a simple square of some dimensions(say 100px X 100px)
- Rotate the square at an angle of 45 degrees
- Draw two circles and place them on the left and right sides of the rotated square using the ::before and ::after pseudo-element selectors.
The most important and trickier thing here is to place the two circles on the left and right sides of the square. To do that we have to first set the position of the square to relative and that of the circles to absolute so that their position can be controlled using the top and left properties with respect to the square.
Here is the full code with a working example:
Example:
.heart{
width: 100px;
height: 100px;
transform: rotate(45deg);
transform-origin: center;
position: relative;
background: red;
margin: 100px auto;
}
.heart::before, .heart::after{
content: '';
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
}
.heart::before{
left: -50px;
}
.heart::after{
top: -50px;
}
If you don’t want to draw the heart shape manually as we did in the above example, you can use heart emojis. There are thousands of emojis available online and the best thing is that you can copy them into your HTML elements.
See the following example where we have copied a ❤️ emoji into the div tag:
Example:
<div class="heart">I ❤️ You</div>
