Requirements/Features:

  • How to use CSS+HTMl painting a heart.

Analysis:

  • The heart can be made by combining a square and two circles.
  1. First draw a square + circle and place it as follows:

  1. I’m going to add a circle.

  1. Finally, rotate the whole figure 45 degrees clockwise.

Preliminary implementation:

    1. First draw a square:
<body>
    <div id="heart"></div>
</body>

Copy the code
#heart{
       height: 300px;
       width: 300px;
       border: 2px solid black;
    }
Copy the code
    1. Add a circle to the left of the square. This is done using the pseudo-class :before
     #heart{
            height: 200px;
            width: 200px;
            border: 2px solid black;
            position: relative;
        }
    #heart:before{
        content: ' ';
        width: 200px;
        height: 200px;
        border: 2px solid black;
        border-radius: 50%; // A square with rounded corners becomes a circleposition: absolute;
        left: -100px; // Move half the square to the left}Copy the code
  • Now the graph looks like this:

  1. Add a circle, which is implemented using the After pseudo-class.
    #heart{
            height: 200px;
            width: 200px;
            border: 2px solid black;
            position: relative; } // Here is a lazy one. I'm just going to write one piece#heart:before,#heart:after{
        content: ' ';
        width: 200px;
        height: 200px;
        border: 2px solid black;
        border-radius: 50%;
        position: absolute;
        left: -100px; } // The second circle only needs to be moved up half the height of the square#heart:after{
        left: 0;
        top: -100px;
    }

Copy the code

  1. And the last step, I’m going to rotate, and I’m going to do it in a different color. Remove the border that was added to make it clear.
   /* Rotate heart and color it */
  transform: rotate(45deg);
  background-color: red;
Copy the code

Complete code:

<style>
        body.html{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        #heart{
            height: 200px;
            width: 200px;
            /*border: 2px solid black; * /
            position: relative;
            transform: rotate(45deg);
            background-color: red;
        }
        #heart:before,#heart:after{
            content: ' ';
            width: 200px;
            height: 200px;
            /*border: 2px solid black; * /
            border-radius: 50%;
            position: absolute;
            left: -100px;
            background-color: red;
        }
        #heart:after{
            left: 0;
            top: -100px;
        }
    </style>
</head>
<body>
    <div id="heart"></div>
</body>
Copy the code

Conclusion:

The heart can be made up of a square and two circles, using before and after pseudo-classes. Then, the two pseudo-classes are shifted separately. Finally squeeze on the color, you can achieve a love ❤️.

Front end small white, thank you for watching, if the feeling can also hope to give a thumbs up 👍. Thank you! If there are mistakes, please point out. Little brother will correct immediately!