CSS实现太极图（1个div实现）

桃扇骨 2023-06-03 09:54 60阅读 0赞

使用一个div实现太极图的步骤如下：

HTML部分：

第一步，结合border实现左黑右白的正方形，加上圆角、阴影。代码如下;

.box-taiji{
        width:0; height:300px; position:relative; margin: 50px auto; border-left:150px solid #000; border-right:150px solid #fff; box-shadow: 0 0 30px rgba(0,0,0,0.5); border-radius: 300px;
            }

效果如下：

![img2018-cnblogs-com_blog_1033887_201811_1033887-20181129220342935-1505597955.png][]

第二步，通过伪类，实现一个一个白色的圆形，定位好位置。同时，利用box-shadow:0 200px 0 \#000;实现同样大小的圆，放好。

.box-taiji:after{
        width:150px; height:150px; position:absolute; content: ''; display: block; top:0; left:-75px; z-index: 1; background-color: #fff; border-radius:50%; box-shadow:0 150px 0 #000;
            }

先后实现的效果如下：

![img2018-cnblogs-com_blog_1033887_201811_1033887-20181129221341910-1820272884.png][]![img2018-cnblogs-com_blog_1033887_201811_1033887-20181129221348839-357469839.png][]

第三步，同样第二步一样的原理，再实现黑白两个圆，放到相关的位置。

.box-taiji:before {
        content:''; position:absolute; display: block; width:75px; height:75px; top:38px; left:-38px; z-index:2; background-color:#000; border-radius:50%; box-shadow:0 150px 0 #fff;
            }

最终效果如下：

![img2018-cnblogs-com_blog_1033887_201811_1033887-20181129222058180-1975294678.png][]

和用[上一篇][Link 1]3个div实现太极图一样，我们也可以通过CSS3动画实现旋转太极图。

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[img2018-cnblogs-com_blog_1033887_201811_1033887-20181129220342935-1505597955.png]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/50/img2018-cnblogs-com_blog_1033887_201811_1033887-20181129220342935-1505597955.png
[img2018-cnblogs-com_blog_1033887_201811_1033887-20181129221341910-1820272884.png]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/50/img2018-cnblogs-com_blog_1033887_201811_1033887-20181129221341910-1820272884.png
[img2018-cnblogs-com_blog_1033887_201811_1033887-20181129221348839-357469839.png]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/50/img2018-cnblogs-com_blog_1033887_201811_1033887-20181129221348839-357469839.png
[img2018-cnblogs-com_blog_1033887_201811_1033887-20181129222058180-1975294678.png]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/50/img2018-cnblogs-com_blog_1033887_201811_1033887-20181129222058180-1975294678.png
[Link 1]: https://www.cnblogs.com/web12/p/10041178.html