一个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%);}}

效果