css实现太极图

首先上个效果图，（不是那么规范）

直接上代码

<div class="main">
    <div class="top">
          <div class="top1"></div>
    </div>
    <div class="bottom">
          <div class="bottom1"></div>
    </div>
</div>

<style>
.main{
  width: 300px;
  height: 300px;
  border: 1px solid #000;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background:linear-gradient(to right , #fff 0%, #fff 50%, black 50%, black 100% );
}
.top{
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: #fff;
}
.top1{
  width: 40px;
  height: 40px;
  margin-top: 55px;
  margin-left: 55px;
  background-color: #000;
  border-radius: 50%;
}
.bottom{
  width: 150px;
  height: 150px;
  border: 1px solid #000;
  border-radius: 50%;
  background-color: #000;
}
.bottom1{
  width: 40px;
  height: 40px;
  margin-top: 55px;
  margin-left: 55px;
  background-color: #fff;
  border-radius: 50%;
}
</style>

没啥技术含量，代码还带优化，各位看个笑话。