Css 八卦

     <div class="box">
        <div class="right_d"></div>
        <span class="back">
            <span class="n1"></span>
        </span>
        <span class="backs">
            <span class="n2"></span>
        </span>
    
    </div>

 

 .box{
    border:5px solid #333;
    border-radius:500px;
    width:500px;
    height:500px;
    position: relative;
    overflow:hidden;
    }
.back{
    background: #000;
    width: 250px;
    height: 250px;
    position: absolute;
    border-radius: 500px;
    left: 25%;
    
}

.backs{
    background: #fff;
    width: 250px;
    height: 250px;
    position: absolute;
    border-radius: 500px;
    left: 25%;
    bottom:0;
    
}
.right_d{
    background:#000;
    width:250px;
    height:500px;
    right:0;
    position:absolute;
}

.n1{
    background:#fff;
    width:100px;
    height:100px;
    border-radius:100px;
    position:absolute;
    top:25%;
    left:25%;
}

.n2{
    background:#000;
    width:100px;
    height:100px;
    border-radius:100px;
    position:absolute;
    bottom:25%;
    left:25%;
}