用H5实现太极八卦图效果

一.代码

二.效果图

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%;
}

效果图