一个div最简方法画太极图

本文主要是介绍一个div最简方法画太极图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一个div最简方法画太极图

直接上代码，一目了然

html

 <div class="太极图"/>

css

.太极图 {position: relative;width: 400px;height: 400px;background: linear-gradient(to right,white 50%,black  50%);border-radius: 50%;box-shadow:0 0 12px gray;&:before,&:after {content: '';display: block;position: absolute;width: 200px;height: 200px;left: 50%;border-radius: 50%;}&:before {top: 25%;translate: -50% -50%;background: radial-gradient(black 25%, white 25%);}&:after {bottom: 25%;translate: -50% 50%;background: radial-gradient(white 25%, black 25%);}}

效果

这篇关于一个div最简方法画太极图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---