div{
width: 300px;
height: 150px;
border: 1px solid black;
margin: 200px auto;
border-bottom: 150px solid black;
position: relative;
border-radius: 50%;
box-shadow: 0 0 30px 30px rgba(255,215,0,.5);
}
div::before{
content: "";
width: 10px;
height: 10px;
background-color: black;
border: 70px solid white;
position: absolute;
left:0;
top: 75px;
border-radius: 50%;
}
div::after{
content: "";
width: 10px;
height: 10px;
background-color: white;
border: 70px solid black;
position: absolute;
right: 0;
top: 75px;
border-radius: 50%;
}
要点是层级,两个点分别设置border为70px,border颜色分别设置为黑白,覆盖白黑两个区域,再设置 border-radius: 50%;形成太极图,点的长宽为10px,2*70+10刚好150px,