<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:%;

}