concentric circles

by sundaramkumar

HTML

<div class="crust">
    <div class="outer">
        <!-- <div class="inner"> -->
            <div class="core"></div>
        <!-- </div> -->
    </div>
</div>

CSS

.crust { width: 27px; height: 27px; background: #7bc47d; border-radius: 27px; }
.outer { width: 19px; height: 19px; background: #ffffff; border-radius: 19px;  position: relative; top: 4px; left: 4px; }
/* .inner { width: 250px; height: 250px; background: green; border-radius: 250px;  position: relative; top: 40px; left: 40px; } */
.core { width: 11px; height: 11px; background: #7bc47d; border-radius: 11px;  position: relative; top: 4px; left: 4px; }