How To Create Heart Shape In CSS Easy Way | CSS Heart Pulse Animation

Posted by:

<!DOCTYPE html>
<html lang="en">
<head>

    <style>
body{
    display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;

}
.heart{
    background: red;
position: relative;
height: 100px;
width: 100px;
transform: rotate(-45deg)
}
 .heart::after{
     background: inherit;
     border-radius: 50%;
     content: '';
     position: absolute;
     top: -50%;
     left: 0;
     height: 100px;
     width: 100px;
 
    }
    .heart::before{
     background: inherit;
     border-radius: 50%;
     content: '';
     position: absolute;
     top: 0;
     right: -50%;
     height: 100px;
     width: 100px;
 
    }




    </style>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hear shape using css</title>
</head>
<body>
    <div class="heart"></div>
</body>
</html>
0

Add a Comment