How to make heart in CSS?

Ethan Karla 1062 15 Jul 2021

If is it possible make heart shape in CSS. then give an example of this shape.

2 Answers

Aryan Kumar 10 Jun 2023

To make a heart in CSS, you can use the following steps:

Create a div element and set its width and height to 50px.
Set the div element's background color to red.
Use the ::before and ::after pseudo-elements to create two curves. The ::before pseudo-element should be rotated 45 degrees and the ::after pseudo-element should be rotated -45 degrees.
Set the ::before and ::after pseudo-elements' width and height to 25px.
Set the ::before and ::after pseudo-elements' border-radius to 50%.

Here is an example of the CSS code for a heart:

Code snippet

div {
  width: 50px;
  height: 50px;
  background-color: red;
}

div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  transform: rotate(45deg);
}

div::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  transform: rotate(-45deg);
}

This code will create a heart that is 50px wide and 50px high. The heart will be red with two curves that meet in the middle.

You can adjust the width and height of the heart, as well as the color of the background, to suit your needs. You can also use the ::before and ::after pseudo-elements to create other shapes, such as stars, flowers, and animals.

Ravi Vishwakarma 15 Jul 2021

Heart Shape

<!DOCTYPE html>

<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>

<head>

    <meta charset='utf-8' />

    <style type='text/css'>

        body{

            text-align:center;

            display: flex;

            flex-direction:column;

            justify-content: center;

            align-items: center;

        }

            body div {

                margin: 50px;

            }

         .heart {

            width:100px;

            height:60px;

            position:relative;

            display:block;

            background-color:red;

            transform:rotate(45deg);

            border-radius:50px 0px 0px 50px ;

        }

            .heart::after {

               width:100px;

            height:60px;

            position:absolute;

            display:block;

            content:'';

            background-color:red;

            transform:rotate(90deg);

            left:20px;

            top:-20px;

            border-radius:50px 0px 0px 50px ;

            }

    </style>

    <title>Animation Demo</title>

</head>

<body>

    <div class='heart'>  </div> Heart Shape <br />

</body>

</html>

forum

How to make heart in CSS?

Can you answer this question?

2 Answers