用css设计实现太极八卦图的效果

<div></div>
<style>
 div{
 position:relative;
 width:150px;
 height:300px;
 background-color:#fff;
 border-left:150px solid #000;
 border-radius:50%;
}
 div::before{
  content:'';
  position:absolute;
  top:0;
  left:-75px;
  width:30px;
  height:30px;
  background-color:#fff;
  border:60px solid #000;
  border-radius:50%;
}
div::after{
  content:'';
  position:absolute;
  bottom:0;
  left:-75px;
  width:30px;
  height:30px;
  background-color:#000;
  border:60px solid #fff;
  border-radius:50%;
}
</style>