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 #;
    border-radius:500px;
    width:500px;
    height:500px;
    position: relative;
    overflow:hidden;
    }
.back{
    background: #;
    width: 250px;
    height: 250px;
    position: absolute;
    border-radius: 500px;
    left: %;

}

.backs{
    background: #fff;
    width: 250px;
    height: 250px;
    position: absolute;
    border-radius: 500px;
    left: %;
    bottom:;

}
.right_d{
    background:#;
    width:250px;
    height:500px;
    right:;
    position:absolute;
}

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

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