Learn with Param{ P }

BlogVideos
#react
#css
#javascript
#tech talks

How to draw a heart using CSS3

Share:
July 18, 2019🍿 2 min readEdit this post on Github

This is part 1 of 2 in my series on "Drawing and animate heart shape 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 and after 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);
}

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;
  }
}

Subscribe to my Newsletter

I share best news, articles and projects about JavaScript, React, GraphQL and real world development practices

Share:

Made with ❤️ in Tallinn, Estonia

Paramanantham Harrison's DEV Profile