Three ways to draw a heart shape with CSS

Below, we introduce three ways to draw heart shapes using CSS. The implementation process is very simple, and you will definitely learn it at a glance.

1. One div, one heart

The core method of drawing a heart with a div is to use pseudo-elements.

First, we write a div on the page:

<div></div>

Use CSS to change this div into an orange square:

div {
  position:relative;
  top: 100px;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: tomato;
}

Next, we use the element’s two pseudo-elements: before and: after to draw a blue circle and a yellow circle, and position their centers at the top and right of the square respectively.

div:before {
  content: "";
  position:absolute;
  top: -50px;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: blue;
}
div:after{
  content: "";
  position: absolute;
  top: 0px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: yellow;
  border-radius: 50%;
}

Next, change the two circles we just implemented to the same color as the square:

div:before {
  ...
  background-color: tomato;
}
div:after{
  ...
  background-color: tomato;
}

Finally, rotate the element div 45 degrees, and we have the heart shape we want! It's that simple.

div {
  position:relative;
  top: 100px;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: tomato;
  transform: rotate(-45deg);
}

2. One heart is not enough, so let's draw a screen

One heart is not enough to express my feelings, so I will draw a screen of hearts for her.

❤❤❤❤❤❤❤❤❤❤❤❤

I have endless feelings for you, and I have endless divs to write about:

HTML

<h1>Love is everywhere...</h1>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
...

Float them so they fill the entire screen:

.heart{
  position: relative;
  width: 100px;
  height: 90px;
  float: left;
}

The two pseudo elements represent my left and right atria:

.heart:before,
.heart:after{
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: #fc2e5a;
  border-radius: 50px 50px 0 0;
  transform-origin: 0 100%;
}
.heart:after{
  left: 0;
  transform-origin :100% 100%;
}

By rotating the left and right atria 45 degrees, I can see a screen full of hearts:

.heart:before,
.heart:after{
  ...
  transform: rotate(-45deg);
}
.heart:after{
  ...
  transform: rotate(45deg);
}

3. How deep is my love for you

"I used to see things with my physical eyes, but the moment I died, I began to see the world with my mind's eyes, and I could see everything more clearly than ever before." - Stephen Chow

No matter how many hearts I have, they cannot express how deep my love for you is, so I want you to see that my heart is made up of every cell that loves you:

<div class="heart"></div>

CSS:

.heart {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 105px;
  height: 105px;
  margin: -52.5px 0 0 -52.5px;
}

The pixel-level world can be achieved by the box-shadow property:

.heart::before {
  content: '';
  display: block;
  transition: all 400ms;
  width: 15px;
  height: 15px;
  margin: -15px 0 0 -15px;
  box-shadow: 30px 15px #8e1a19, 45px 15px #ac0500, 75px 15px #f73f0c, 90px 15px #fa5f27, 15px 30px #740100, 30px 30px #8e0500, 45px 30px #8e1918, 60px 30px #ca1300, 75px 30px #f34f2b, 90px 30px #df351f, 105px 30px #f77c2a, 15px 45px #4b0000, 30px 45px #690100, 45px 45px #8e0f0b, 60px 45px #bf1000, 75px 45px #f84010, 90px 45px #f04222, 105px 45px #fa5724, 15px 60px #451312, 30px 60px #5a0100, 45px 60px #840e0c, 60px 60px #a51d1a, 75px 60px #ed2805, 90px 60px #d9321e, 105px 60px #f44622, 30px 75px #3b0000, 45px 75px #5d1a1b, 60px 75px #8e1a19, 75px 75px #a80700, 90px 75px #b90a00, 45px 90px #3d0000, 60px 90px #551415, 75px 90px #670100, 60px 105px #340000;
  animation: pulse 1.2s steps(1) infinite;
}

Just like that, a pixel-level heart shape is completed. Then we can add an animation effect to it so that each of its cells will produce an animation effect. You can try it.

Finally, here's a CSS heart-shaped animation effect:

Summarize

The above are three methods of drawing heart shapes with CSS that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!

<<: Cross-browser development experience summary (I) HTML tags

>>: MySQL database basic syntax and operation