夹层原理——纯CSS实现一个五环展示

最新推荐文章于 2024-08-05 17:30:48 发布

MonsterQy

最新推荐文章于 2024-08-05 17:30:48 发布

阅读量163

点赞数 6

文章标签： css 前端

本文链接：https://blog.csdn.net/xiao_a_fighting/article/details/139127930

版权

说起五环，第一反应肯定是很好实现，无非就是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;
}