How to make heart in CSS?

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

Last updated:7/15/2021 1:24:15 AM

1 Answers

Ravi Vishwakarma
Ravi Vishwakarma

Heart Shape

How to make heart in CSS?

<!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>


Answer