How to draw a heart using CSS3
This is part 1 of drawing and animating heart shape using CSS3. In this article, we will learn how to draw the heart shape first using pure CSS tricks
Shapes like heart are achievable using pure CSS because it contains curved rounded corners at the top and slanting lines in the bottom.
Lets get into how we can create it step by step
- Create a simple square container (50px X 50px)
- rotate the container 45deg. This will make the bottom slanting lines
- Now in-order to make the two upper curves in the heart shape, we can make use of pseudo
before
andafter
element.
Lets dig into the code and see how it goes step by step.
Creating Heart container
A 50 X 50 square which will then be rotate 45deg using CSS transform property. This inverted square will look like a diamond shape.
.heart {
background-color: #fff;
// Square with size 50px
width: 50px;
height: 50px;
position: relative;
// Rotate 45deg to make it looks like diamond
transform: rotate(45deg);
}
https://codepen.io/Param-Harrison/pen/MNwXYE
Create the pseudo elements
Create the same size pseudo element with border radius 50%. Now these element won't be visible because its hidden under the Heart container.
Inorder to make it visible, change the top and left position for the respective psuedo elements.
- left for the
before
element - top position for the
after
element
We need to move half the size of heart container to get the heart shape.
.heart {
&::before,
&::after {
position: absolute;
content: '';
// Pseudo elements of same size as container
width: 50px;
height: 50px;
background-color: #fff;
// It will make the pseudo element as circle
border-radius: 50%;
}
&::before {
// Only reveal half the circle to look like left side top of heart
left: -25px;
}
&::after {
// Only reveal half the circle to look like right side top of heart
top: -25px;
}
}