Three methods of drawing heart in CSS

Time:2019-12-1

Next, I will introduce three methods of drawing heart in CSS. The implementation process is very simple, you can see it.

1. A div and a heart

To draw a heart with a div, the core method is to use pseudo elements.

First, we write a div on the page:

<div></div>

Using CSS, change the div to an orange square:
 


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

Then we use two pseudo elements of the element: before and after to draw a blue circle and a yellow circle, and locate their centers on the upper and right sides 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 just realized into the same color as the square:


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

Finally, rotate the element div 45 degrees, and the heart shape we want is achieved! 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, let’s draw a screen

A heart is not enough to express my mind, so draw her a screen of heart.

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

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

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

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

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

I can’t finish expressing my mind to you, I can’t finish writing div:

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 to fill the screen:


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

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%;
}

Let the left and right atria rotate 45 degrees, forming my full screen heart:


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

 

3. How much I love you

“I used to look at things with the naked eye, but at the moment of my death, I began to look at the world with my heart. All things can really be seen as clearly as ever.” – Stephen Chow

No matter how many hearts can’t express how deep I love you, 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;
}

Pixel level world can be realized by box shadow attribute:
 


.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;
}

In this way, a pixel level cardioid is finished. Then we can add an animation effect to it, and let every cell produce an animation effect. You can try it.

Finally, I will give you a CSS heart-shaped animation effect:

summary

The above three methods are introduced to you by Xiaobian. I hope they can help you. If you have any questions, please leave me a message and Xiaobian will reply you in time. Thank you very much for your support of the developepaer website!
If you think this article is helpful to you, welcome to reprint, please indicate the source, thank you!