方法一:直接用CSS画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>阴阳</title>
<style>
.fr {
float: right;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
div[class~="yy"] {
position: relative;
width: 200px;
height: 200px;
background: linear-gradient(to bottom, #ffffff 0%,#ffffff 50%,#000000 50%,#000000 100%);
border: 1px solid red;
border-radius: 50%
}
div[class~="whi"] {
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background: #fff;
top: 50px;
right: 0;
}
div[class~="bla"] {
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background: #000;
top: 50px;
left: 0;
}
div[class="x1"] {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #000;
position: absolute;
top: 40px;
left: 40px;
}
div[class="x2"] {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
position: absolute;
top: 40px;
left: 40px;
}
</style>
</head>
<body>
<div class="yy">
<div class="whi">
<div class="x1"></div>
</div>
<div class="bla">
<div class="x2"></div>
</div>
</div>
</body>
</html>
- 关键:渐变做颜色(用border做也可以)
定位找位置 - 注意若父元素已经绝对定位了,子元素也可以用绝对定位来控制位置
定位中的top,bottom,left,right的值是子元素相当于父元素上下左右空出来的距离
方法二:用伪类选择器画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>阴阳02</title>
</head>
<style>
.clearfix::after {
content: '';
display: block;
clear:both;
}
div[class="box"] {
position: relative;
width: 200px;
height: 200px;
border: 1px solid red;
border-radius: 50%;
background: linear-gradient(to bottom, #ffffff 0%,#ffffff 50%,#000000 50%,#000000 100%);
}
div[class="box"]:before {
content: '';
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
border: 40px solid #000;
top: 50px;
left: 0px;
}
div[class="box"]:after {
content: '';
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: #000;
border: 40px solid #fff;
top: 50px;
right: 0px;
box-sizing: border-box/content-box;
}
</style>
<body>
<div class="box"></div>
</body>
</html>
- 关键:伪类选择器的使用,定位
- 注意伪类选择器必须有content=’’;语句,否则没有任何效果