css yinyang 阴阳太极图

[gaoryrt]

<div class="yinyang"></div> 请填写yinyang的css

[gaoryrt]

background-image: data:xxx base64 background image

[gaoryrt]

两个伪元素

    #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;
    }

[gaoryrt]

.yingyang:after {
    content: '☯'
}

utf-8 emoji

[gaoryrt]

background-image:url('data:image/svg+xml;charset=UTF-8,<svg>...</svg>') inline svg background image

[gaoryrt]

  .yinyang {
      position: relative;
      height: 100px;
      width: 0;
      border-radius: 100px;
      border-left: black 50px solid;
      border-right: white 50px solid;
      filter: drop-shadow(0 0 1px black);
    }
    .yinyang:before,
    .yinyang:after {
      position: absolute;
      content: '';
      height: 20px;
      width: 20px;
      border-radius: 25px;
      border: 15px solid #000;
      background: #fff;
      z-index: 2;
      top: 0;
      left: -25px;

    }
    .yinyang:after {
      top: 50px;
      border: 15px solid #fff;
      background: #000;
    }

伪元素版2

[gaoryrt]

.yinyang {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border: solid red 10px;
    backgrround:
        no-repeat 0 50%/50% 50% radial-gradient(#fff, #fff 50px, red 50%, red 125px, transparent 125px),
        no-repeat right 50%/50% 50% radial-gradient(red, red 50px, #fff 50px, #fff 125px, transparent 125px),
        no-repeat center/100% linear-gradient(#fff, #fff 50%, red 50%)
}

径向渐变 background 写一切

[gaoryrt]

css mask、clip-path 应该都可以，但是都要用到 svg

[gaoryrt]

iconfont 也是个办法，但是还是要先画图，然后生成字体再引用，有点麻烦