利用CSS创作太极图

一、制作基础

   在Css中，我们可以利用<border-radius>来制作各种形状，其中太极图是一个典型的例子。需要提醒的是，制作太极图有多种方法，这里描述的只是一种有趣的写法，并不唯一。

这就是成功后的效果

二、HTML部分

我们可以将太极图分为三个圆，一个大圆加两个小圆，所以我们需要三个盒子，再通过调整圆角和位置来组成图形

<div class="nav">
        <div class="black"></div>
        <div class="white"></div>
    </div>

三、设置外圆

外圆由半黑半白组成，因此可以巧妙的使用边框宽高来达到效果

.nav{
            /* 将图形居中 */
            margin:50px auto;
            /* 设置一个宽200px 高100px的长方体 */
            width: 200px;
            height: 100px;

            /* 将底边框宽高设为100px */
            border: 1px solid black;
            border-bottom: 100px solid black;
            /* 设置圆角100% */
            border-radius: 50%;
        }

得到的效果图即可

 

四、设置内部小圆

可以看出小圆的外部和中心是不同颜色的，因此我们同样可以利用边框制作

 .black{
            /* 设置内容区大小作为中心*/
            height: 20px;
            width: 20px;
            background-color: black;

            /* 设置外部边框大小作为外圆 */
            border: 40px solid white;
            border-radius: 50%;
            margin-top: 25%;
        }

        

五、将小圆放入大圆内

利用各种margin方式都可以将小圆并排放入大圆内从而使得图形成功，这里我使用margin来实现

就得到图形了