Draw a heart with CSS3
Achieve results
Requirements/Functionality:How to draw a heart using CSS+HTML. analyze: A heart can be formed by combining a square and two circles.
Add another circle.
Finally, rotate the entire shape 45 degrees clockwise.
Initial implementation:First draw a square:
<body>
<div id="heart"></div>
</body>
#heart{
height: 300px;
width: 300px;
border: 2px solid black;
}
Add a circle to the left of the square. Use the pseudo class: before to achieve this.
#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%; // Square with rounded corners becomes a circle position: absolute;
left: -100px; // shift the square half its length to the left}
The graph now looks like this:
Add another circle, here we use the after pseudo class to achieve it.
#heart{
height: 200px;
width: 200px;
border: 2px solid black;
position: relative;
}
// I'm being lazy here. I'll just write one block #heart:before, #heart:after {
content: '';
width: 200px;
height: 200px;
border: 2px solid black;
border-radius: 50%;
position: absolute;
left: -100px;
}
// For the second circle, we only need to move the square halfway up#heart:after{
left: 0;
top: -100px;
}
The last step is to rotate it and then add some color. Remove the border that was added to make it clearer. /*Rotate the heart and add color*/ transform: rotate(45deg); background-color: red; 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>
Summarize:A heart can be made up of a square and two circles. Here, we use the before and after pseudo-classes, and then shift the two pseudo-classes respectively. Finally, we add color to create a heart ❤️. The above is the detailed content of how to draw a heart with CSS3. For more information about drawing a heart with CSS3, please pay attention to other related articles on 123WORDPRESS.COM! |
<<: HTML solves the problem of invalid table width setting
Recommend
Common ways to optimize Docker image size
The Docker images we usually build are usually la...
A brief analysis of Linux to check the firewall status and the status of the ports open to the outside world
1. Check the firewall status Check the firewall s...
How to solve the problem that Docker container has no vim command
Find the problem Today, when I tried to modify th...
JS implements multiple tab switching carousel
Carousel animation can improve the appearance and...
Element table header row height problem solution
Table of contents Preface 1. Cause of the problem...
MySQL data aggregation and grouping
We often need to summarize data without actually ...
The ultimate solution for writing bash scripts with nodejs
Table of contents Preface zx library $`command` c...
How to modify the time zone and time in Ubuntu system
On a Linux computer, there are two times, one is ...
Web page printing thin line table + page printing ultimate strategy
When I was printing for a client recently, he aske...
Don't forget to close the HTML tag
Building web pages that comply with Web standards ...
MySQL installation and configuration method graphic tutorial (CentOS7)
1. System environment [root@localhost home]# cat ...
MySQL 5.7.16 free installation version graphic tutorial under Linux
This article shares the MySQL 5.7.16 free install...
Detailed explanation of Tomcat configuration and optimization solutions
Service.xml The Server.xml configuration file is ...
MySQL learning notes: complete select statement usage example detailed explanation
This article uses an example to illustrate the co...
Tutorial on how to install and use Ceph distributed software under Linux
Table of contents Preface 1. Basic Environment 1....