一个DIV制作八卦图

思路

1. 用一个div，利用css的线性渐变实现上下分割的黑白

   
   

.taiji{
  border:1px solid black;
  width:400px;
  height:400px;
  border-radius:50%;
  background: linear-gradient(to bottom, #ffffff 50%,#000000 50%);
}

2.利用before和after伪类，给太极加上两个半圆

.taiji::before{
  content:'';
  background:black;
  position:absolute;
  width:200px;
  height:200px;
  border-radius:50%;
  left:0;
  top:25%;
}
.taiji::after{
  content:'';
  background:white;
  position:absolute;
  width:200px;
  height:200px;
  border-radius:50%;
  left:50%;
  top:25%;
}

3.现在我们需要实现最中心的两个小圆，但是如果利用div实现就违背了我们的初衷，所以我们可以优化上面的css，使用边框来让before和after实现效果

.taiji::before{
  content:'';
  background:white;
  border:75px solid black;
  position:absolute;
  width:50px;
  height:50px;
  border-radius:50%;
  left:0;
  top:25%;
}
.taiji::after{
  content:'';
  background:black;
  border:75px solid white;
  position:absolute;
  width:50px;
  height:50px;
  border-radius:50%;
  left:50%;
  top:25%;
}