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
Detailed explanation of the difference between tags and elements in HTML
I believe that many friends who are new to web pag...
How to use native JS to implement touch sliding monitoring events
Preface I wrote a small demo today. There is a pa...
Detailed explanation of Nginx configuration parameters in Chinese (load balancing and reverse proxy)
PS: I've recently been reading the Nginx chap...
Summary of some HTML code writing style suggestions
Omit the protocol of the resource file It is reco...
Linux touch command usage examples
Detailed explanation of linux touch command: 1. C...
Common front-end JavaScript method encapsulation
Table of contents 1. Enter a value and return its...
JavaScript canvas to achieve raindrop effects
This article example shares the specific code of ...
Set the default text of the search box. The default text disappears when the mouse is clicked.
Copy code The code is as follows: <input type=...
JS 4 super practical tips to improve development efficiency
Table of contents 1. Short circuit judgment 2. Op...
How to use a field in one table to update a field in another table in MySQL
1. Modify 1 column update student s, city c set s...
How to solve the problem that the project in eclipse cannot be added to tomcat
1. Right-click the project and select properties ...
Comment reply pop-up mask effect implementation idea compatible with ie 8/chrome/firefox
I like to pay attention to some news on weekdays a...
Vue implements an example of pulling down and scrolling to load data
Table of contents Step 1: Installation Step 2: Ci...
MySql learning day03: connection and query details between data tables
Primary Key: Keyword: primary key Features: canno...
MySQL compressed package version zip installation configuration method
There are some problems with the compressed versi...