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 and after element.
Create the same size pseudo element with border radius 50%. Now these element won’t be visible because its hidden under the Heart container.
In order 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
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn How To Draw CSS Shapes from the ground up by following these CSS Examples.
If you liked this post, make sure to follow me on Twitter where I post daily about Tech related things!
Top comments (0)