Nerf Target

by Neviton

HTML

<div class="target-wrapper">
    <div class="ratio">
        <div class="one-point">
            <div class="top-left">
                <div class="corner"></div>
            </div>
            <div class="top-right">
                <div class="corner"></div>
            </div>
            <div class="bottom-left">
                <div class="corner"></div>
            </div>
            <div class="bottom-right">
                <div class="corner"></div>
            </div>
        </div>
        
        <div class="three-points">
            <div class="top-left">
                <div class="corner"></div>
            </div>
            <div class="top-right">
                <div class="corner"></div>
            </div>
            <div class="bottom-left">
                <div class="corner"></div>
            </div>
            <div class="bottom-right">
                <div class="corner"></div>
            </div>
        </div>
        
        <div class="five-points">
            <div class="top-left">
                <div class="corner"></div>
            </div>
            <div class="top-right">
                <div class="corner"></div>
            </div>
            <div class="bottom-left">
                <div class="corner"></div>
            </div>
            <div class="bottom-right">
                <div class="corner"></div>
            </div>
        </div>
        
        <div class="ten-points">
            <div class="top-left">
                <div class="corner"></div>
            </div>
            <div class="top-right">
                <div class="corner"></div>
            </div>
            <div class="bottom-left">
                <div class="corner"></div>
            </div>
            <div class="bottom-right">
                <div class="corner"></div>
            </div>
        </div>
    </div>
</div>

CSS

.target-wrapper {
    width: 61%;
    margin-left: 19.5%;
    position: relative;
}

.ratio {
    position: relative;
    width: 100%;
    padding-top: 100%;
}

.one-point:after,
.three-points:after,
.five-points:after,
.ten-points:after {
    position: absolute;
    right: 50%;
    margin: 12px 2px;
    font-size: 30px;
    color: #fff;
}

.one-point {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.three-points {
    width: 75%;
    height: 75%;
    position: absolute;
    left: 12.5%;
    top: 12.5%;
}

.five-points {
    width: 50%;
    height: 50%;
    position: absolute;
    left: 25%;
    top: 25%;
}

.ten-points {
    width: 25%;
    height: 25%;
    position: absolute;
    left: 37.5%;
    top: 37.5%;
}

.one-point:after {
    content: '1';
}
.three-points:after {
    content: '3';
}
.five-points:after {
    content: '5';
}
.ten-points:after {
    content: '10';
}

.top-left,
.top-right,
.bottom-left,
.bottom-right {
    box-sizing: border-box;
    width: 50%;
    height: 50%;
    float: left;
    overflow: hidden;
    position: relative;
}
.corner {
    width: 200%;
    height: 200%;
    border: solid 4px white;
    border-radius: 100%;
    position: absolute;
}

.corner {
    text-align: right;
}

.top-left .corner {
    top: 0;
    left: 0;    
}

.top-right .corner {
    top: 0;
    right: 0;
}
.bottom-left .corner {
    bottom: 0;
    left: 0;
}
.bottom-right .corner {
    bottom: 0;
    right: 0;
}

.one-point .top-left .corner {
    background-color: red;
}
.one-point .top-right .corner {
    background-color: blue;
}
.one-point .bottom-left .corner {
    background-color: blue;
}
.one-point .bottom-right .corner {
    background-color: red;
}

.three-points .top-left .corner {
    background-color: #00d;
}
.three-points .top-right .corner {
    background-color: #d00;
}
.three-points .bottom-left .corner {
    background-color: #d00;
}
.three-points .bottom-right .corner {
    background-color:...