一.代码
二.效果图
HTML部分
<div class="box">
<div class="black"></div>
<div class="white"></div>
</div>
CSS部分
1.大圆部分
.box {
/* 将图形居中 */
margin: 50px auto;
/* 设置一个宽200px 高100px的长方体 */
width: 200px;
height: 100px;
/* 将底边框宽高设为100px */
border: 1px solid black;
border-bottom: 100px solid black;
/* 设置圆角100% */
border-radius: 50%;
/* 设置弹性布局 */
display: flex;
}
2.小圆部分
.black {
/* 设置内容区大小作为中心*/
height: 20px;
width: 20px;
background-color: black;
/* 设置外部边框大小作为外圆 */
border: 40px solid white;
border-radius: 50%;
margin-top: 25%;
}
.white {
/* 设置内容区大小作为中心*/
height: 20px;
width: 20px;
background-color: white ;
/* 设置外部边框大小作为外圆 */
border: 40px solid black;
border-radius: 50%;
margin-top: 25%;
}
效果图