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

Vue uses vue meta info to set the title and meta information of each page

Three ways to draw a heart shape with CSS

Vue uses vue meta info to set the title and meta information of each page

CSS implements Google Material Design text input box style (recommended)

How to use nginx to configure access to wgcloud

Dockerfile text file usage example analysis

Solution to ONLY_FULL_GROUP_BY error in Mysql5.7 and above

Advantages and disadvantages of Table layout and why it is not recommended

Summary of the 10 most frequently asked questions in Linux interviews

How to analyze SQL execution plan in MySQL through EXPLAIN

Detailed explanation of creating and calling MySQL stored procedures

The meaning and usage of linux cd

Recommend

A detailed account of the process of climbing a pit of Docker deployment service

CSS -webkit-box-orient: vertical property lost after compilation

How to install redis5.0.3 in docker

The marquee element implements effects such as scrolling fonts and pictures

Solution to the problem of mysql service starting but not connecting

Teach you how to solve the error when storing Chinese characters in MySQL database

Specific usage instructions for mysql-joins

Common methods of Vue componentization: component value transfer and communication

Jmeter connects to the database process diagram

MySQL 5.6 installation steps with pictures and text

Example code for changing the style of other tags by hovering the mouse using CSS

Detailed tutorial on installing Docker on CentOS 8.4

Detailed steps for installing, configuring and uninstalling QT5 in Ubuntu 14.04

Summary of the deployment of Tomcat cluster and Nginx load balancing based on Docker

Analysis of the principles and usage of Linux hard links and soft links