用css3中的伪类选择器实现太极图效果

整体效果

完整代码如下：

一、先把轮廓写出

    div {
        /* 距离上下100px，左右对齐 */
        margin: 100px auto;  
        width: 200px;
        height: 400px;
        background-color: #fff;
        border-left: 200px solid #000;
    }

宽度200px+200px的左边框和高的大小是相同的，恰好是个正方形

---

使用border-radius：50%可以形成一个圆

二、使用伪类选择器制作div内的两个半圆

1.设置右上角半圆效果：

半圆直径就是大圆的半径200px，由于半圆内镶嵌一个小圆，依然可以用边框来同时设置。
根据你想要小圆的直径作为高宽，此时的border=（200px-小圆直径）/2

  div::before {
            /*伪元素创建的是一个元素，但属于行内元素，需转化为块级元素*/
            display: block;
            content: "";
            /*content属性在伪类选择器中必不可少*/
            width: 50px;
            height: 50px;
            background-color: #fff;
            border-radius: 50%;
            margin-left: -100px;
            /*如果不向左移动，会显示整个半圆的大小，但我们只是想要半圆的右半部分*/
            border: 75px solid #000;     
            
        }

例：
没有向左移动的效果

向左移动半圆的一半的效果

2.右下角的半圆写法相同

div::after {
            display: block;
            content: "";
            width: 50px;
            height: 50px;
            background-color: #000;
            border: 75px solid #fff;
            border-radius: 50%;
            margin-left: -100px;
        }

3.写法相同的部分可以简写

div::before,
div::after {
            content: "";
            display: block;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-left: -100px;
        }
        div::before {
            background-color: #fff;
            border: 75px solid #000;
        }
        div::after {
            background-color: #000;
            border: 75px solid #fff;
        }

三、可以加一个360°旋转效果

 div:hover {
            transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
        }

 过渡效果不要忘，不然360°看不出来效果
 div {
    transition: all .5s;
  }