css实现太极图

可以使用 CSS 的伪元素和 transform 属性来实现太极图。以下是示例代码：

HTML:

<div class="taiji"></div>

CSS:

.taiji {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #000;
  position: relative;
}
.taiji::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #fff;
}
.taiji::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #000;
}

解析：

- 通过 `border-radius: 50%;` 设置圆形。
- 通过 `position: relative;` 设置相对定位。
- 使用 `::before` 和 `::after` 伪元素来实现阴阳两极。
- 通过 `transform` 属性实现居中对齐。