前端项目实现——奥运五环

说起五环，第一反应肯定是很好实现 ，无非就是ul无序列表，然后利用position进行定位，最后改变颜色。但我们仔细观察，五环的实现其实并没有那么简单，由于每个环的位置关系，我们需要设置两层——（利用z-index调整，最后实现环之间的位置）
html代码如下：

    <div class="wrap">
    <ul>
        <li class="blue"></li>
        <li class="blue new"></li>
        <li class="black"></li>
        <li class="black new"></li>
        <li class="red"></li>
        <li class="red new"></li>
        <li class="yellow"></li>
        <li class="yellow new"></li>
        <li class="green"></li>
        <li class="green new"></li>
    </ul>
</div>

这里的xx new 在这里是第二层，xx 为本体是第一层在这里以蓝色和黄色为例可以看到 蓝色的右侧是在黄色的上面，而下部分蓝色是在黄色的下面，所以这里 我们就要用到‘夹层原理’了，我们让蓝色的本体（即blue）z-index值小于黄色，而让它的第二层（blue new）z-index值大于黄色。然后我们为第二层设置border颜色，只需要让其颜色（下半部分为透明即可）此项目实现过程中，颜色都是利用伪类来设置，而z-index都是用其本体的css类来设置。接下来上代码

.blue{
z-index: 27;
.blue.new {
  z-index: 29;
}
.blue.new::after {
  border-color: blue blue transparent blue ;
}
.blue::after{
content: '';
border-color: blue;
}
.yellow {
  top: 5.7em;
  left: 6.8em;
  z-index: 25;
}
.yellow::after{
content: '';
border-color: yellow;
}
.yellow.new {
  z-index: 28;
}
.yellow.new::after {
  border-color: yellow transparent yellow yellow;
}

这些是所有的细节实现原理