css如何实现太极图形

这篇文章主要介绍了css如何实现太极图形，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

太极

#yin-yang {  width: 96px;  box-sizing: content-box;  height: 48px;  background: #eee;  border-color: red;  border-style: solid;  border-width: 2px 2px 50px 2px;  border-radius: 100%;  position: relative;}#yin-yang:before {  content: "";  position: absolute;  top: 50%;  left: 0;  background: #eee;  border: 18px solid red;  border-radius: 100%;  width: 12px;  height: 12px;  box-sizing: content-box;}#yin-yang:after {  content: "";  position: absolute;  top: 50%;  left: 50%;  background: red;  border: 18px solid #eee;  border-radius: 100%;  width: 12px;  height: 12px;  box-sizing: content-box;}

感谢你能够认真阅读完这篇文章，希望小编分享的"css如何实现太极图形"这篇文章对大家有帮助，同时也希望大家多多支持，关注行业资讯频道，更多相关知识等着你来学习!