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

效果