绘制太极图

作者: 钢笔先生 | 来源:发表于2020-02-01 12:16 被阅读0次

HTML5 Canvas笔记——HTML5 Canvas绘图绘制
绘制太极图
canvas绘制太极图
Python turtle绘制阴阳太极图代码解析
立人八卦
各国国旗寓意（3）
古太极图
客观手绘太极图的两种方法
遇见林清玄——你没读过的那些触动灵魂的句子（十一）
太极图的黑点、白点代表什么动物？彩虹为何说是“天地之淫气”

Time: 20200131

用圆形组合

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

这么一拆解就很清晰了。

HTML

<!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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="taiji"></div>
</body>
</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;
}

显示效果：