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
How to solve the problem of not finding the password after decompressing the MySQL free installation version
1. Unzip mysql-8.0.21-winx64 2. Configure environ...
MySQL uses inet_aton and inet_ntoa to process IP address data
This article will introduce how to save IP addres...
CSS3 creates 3D cube loading effects
Brief Description This is a CSS3 cool 3D cube pre...
How to use HTML form with multiple examples
Nine simple examples analyze the use of HTML form...
Mysql tree-structured database table design
Table of contents Preface 1. Basic Data 2. Inheri...
MySQL uses custom sequences to implement row_number functions (detailed steps)
After reading some articles, I finally figured ou...
Tips for adding favicon to a website: a small icon in front of the URL
The so-called favicon, which is the abbreviation o...
Docker starts Redis and sets the password
Redis uses the apline (Alps) image of Redis versi...
Various transformation effects of HTML web page switching
<META http-equiv="Page-Enter" CONTENT...
Vue implements small notepad function
This article example shares the specific code of ...
The perfect solution to the error of installing Mysql Applying Security in windows server2014
The reason is that it was not uninstalled cleanly...
Detailed explanation of the difference between cesllspacing and cellpadding in table
What is a table? It is composed of cell cells. In...
Installing MySQL 8.0.12 based on Windows
This tutorial is only applicable to Windows syste...
A brief introduction to protobuf and installation tutorial in Ubuntu 16.04 environment
A brief introduction to protobuf Protobuf is Goog...
Vue implements verification code countdown button
This article example shares the specific code of ...