使用一个div实现5个圆环

怎么实现以下这张图片的效果？不许用图片，不许用svg。

我：(⊙o⊙)… 我当时的回答是可以div嵌套，emmmm…好像有点low啊，，，
面试官提示：能不能用一个div实现呢？
我：(⊙o⊙)…我只知道背景色和border可以设置颜色，那也只有两个环，，，
面试官：你可以想想盒模型中，哪些属性可以设置背景色的
我：(⊙o⊙)…border和margin
面试官：这俩可以设置颜色吗？？？你确定？？
我：(⊙o⊙)…不能设置颜色，我再想想，，
面试官又提示：伪元素了解吗？
我：(⊙o⊙)…before和after吗？
面试官：对哦，他们是块级的还是什么？
我：块儿级的
面试官：那他们可以设置宽高吗？可以设置颜色吗？
我：(⊙o⊙)…好像可以
面试官：那你现在可以有几个环了
我：四个？？
面试官：好吧，这个不纠结了，你可以再去研究一下。
我：凉。。。。。

行吧，，，今天来完成一下这个，废话不多说，直接上代码：

	div {
        width: 100px;
        height: 100px;
        background-color: brown;
        border: 10px solid gold;
        border-radius: 50%;
        box-shadow: 0px 0px 0px 10px;
        margin: 10px;
      }
      div::before {
        background-color: green;
        height: 50%;
        width: 50%;
        border-radius: 50%;
        display: block;
        content: '';
        position: relative;
        top: 25%;
        left: 25%;
      }
      div::after {
        background-color: sandybrown;
        height: 80%;
        width: 80%;
        border-radius: 50%;
        display: block;
        content: '';
        margin-top: -40%;
        margin-left: 10%;
      }

总结一下：

1. 背景颜色
2. border属性
3. after伪元素
4. before伪元素
5. box-shadow属性
6. 结合定位将他们的位置摆一摆就ok啦！

写完还是蛮有意思的，css也是一门大学问，虽然面试没有通过，有点小失落，但是还得接着学鸭！接着学！！！
以上内容只是自己琢磨出来的一种解决方法，欢迎大家讨论！