Home >Web Front-end >CSS Tutorial >How to make a red heart with css
How to make a red heart with css
- 藏色散人Original
- 2021-02-28 15:17:062333browse
How to make a red heart with css: first create an HTML sample file; then define a div and draw a circle through css attributes; then make a square; and finally use the rotate attribute in css transform Just implement the love style.
The operating environment of this tutorial: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.
Make a love with css
Abstract: HTML tags are relatively simple, and getting started is very fast, but CSS is something that requires us to dig deeply. , many of the style attributes in it can be achieved by mastering a few commonly used ones to achieve beautiful effects. Now I will teach you how to use CSS to make a heart.
Preliminary knowledge:
- Understand how to draw a square.
- Understand how to draw circles.
- Understand what positioning is.
- Know how to rotate.
Without further ado, let me first teach you how to draw a circle using CSS.
.disc1{
width: 100px;
height: 100px;
border:1px solid red;
background-color: red;
margin:300px 0px 0px 300px;
border-radius:100%;
float:left;
}
Since our love is composed of two circles and a square, we need another circle.
.disc2{
width: 100px;
height: 100px;
border:1px solid red;
background-color: red;
margin:250px 0px 0px 0px;
border-radius:100%;
float:left;
position: relative;
right: 50px;
}
[Recommended: "css video tutorial"]
In the third step, we need to make a square.
.square{
width: 100px;
height: 100px;
border:1px solid red;
background-color: red;
margin: 300px 0px 0px 0px;
float: left;
position: relative;
right: 152px;
}
The effect of doing this has basically come out, but we still need to adjust the angle of the love. At this time, we need to use the rotate attribute in the transform in our css style.
Since we need to rotate all three p's by angle, we put these three p's inside one p. The specific code is as follows:
.main{
transform: rotate(45deg);
margin: 300px;
}
By now, our love has been made. The rendering is as follows:
All codes are as follows (including HTML code and CSS code)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="css/square.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<div class="main">
<div class="disc1"></div>
<div class="disc2"></div>
<div class="square"></div>
</div>
</body>
</html>*{
margin: 0px;
padding: 0px;
}
.main{
transform: rotate(45deg);
margin: 300px;
}
.disc1{
width: 100px;
height: 100px;
border:1px solid red;
background-color: red;
margin:300px 0px 0px 300px;
border-radius:100%;
float:left;
}
.disc2{
width: 100px;
height: 100px;
border:1px solid red;
background-color: red;
margin:250px 0px 0px 0px;
border-radius:100%;
float:left;
position: relative;
right: 50px;
}
.square{
width: 100px;
height: 100px;
border:1px solid red;
background-color: red;
margin: 300px 0px 0px 0px;
float: left;
position: relative;
right: 152px;
}
The above is the detailed content of How to make a red heart with css. For more information, please follow other related articles on the PHP Chinese website!