前端知識總結--css用div畫環形圓

如何用最少的div畫最多的環形？如下圖所示最少需要多少個div?

暫時想到的利用div的邊框、內外陰影及befor和after的偽元素實現

以下代碼可以實現上圖效果：

<style>
    div{
        height: 100px;
        width: 100px;
        border-radius: 100px;
        position: absolute;
        top: 40%;
        left: 40%;
        border: solid 10px purple;
        box-shadow: 0px 0px 0px 10px red,0px 0px 0px 10px black inset;
        background: gray;

    }
    div::after{
        content:' ';
        background-color: yellow; 
        border-radius: 100px;
        display: block;
        z-index: -1;
        position: relative; 
        left: -30px;
        top: -30px;
        width: 160px;
        height: 160px;
    }
    div::before{
        content:' ';
        background-color: green; 
        border-radius: 100px;
        display: block;
        z-index: -2;
        position: absolute; 
        left: -40px;
        top: -40px; 
        width: 180px;
        height: 180px;
    }
    </style>

<div></div>

 

 歡迎批評指正！