用纯CSS画一颗爱心
web前端开发
共 1828字,需浏览 4分钟
·
2020-12-27 13:38
前期预备知识:
明白正方形的画法。
明白圆形的画法。
明白什么是定位。
明白怎么旋转。
话不多说,先教大家怎么用css画一个圆形。
.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;
}
.main{
transform: rotate(45deg);
margin: 300px;
}
<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;
}
评论