绘制太极图

Time: 20200131

用圆形组合

截屏2020-01-31下午11.14.22.png

这么一拆解就很清晰了。

HTML

CSS

body {
    background-color: grey;
}
/* 黑白圆 */
#taiji {
    /* 使得定义的宽度 + 边的大小 == 300 */
    width: 150px;
    height: 300px;
    margin: 100px auto;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background-color: #fff;
    /* 解决一半黑一半白的圆的生成问题 */
    border-left: 150px solid black;
    position: relative;
} 

/* 伪类 */
#taiji::before {
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    padding: 25px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border: 50px solid black;
    background-color: white;
    left: -75px;
}

#taiji::after {
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    padding: 25px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border: 50px solid white;
    background-color: black;
    left: -75px;
    top: 150px;
}

显示效果：

截屏2020-01-31下午11.46.44.png

END.