纯CSS实现奥运五环

这是我参与8月更文挑战的第8天，活动详情查看：8月更文挑战css

奥运会立刻结束了，为了庆祝中国队的良好表现，今天咱们来绘制一个奥运五环。html

先看奥运五环的图：css3

实现的难点在于两个圆环交叉的位置互有遮盖，换句话说，咱们不能经过简单的对每一个圆环设置z-index来实现图形的绘制，那么应该怎么办呢？markdown

咱们先来绘制一个圆环：app

实现代码以下：oop

<!DOCTYPE html>
<body>
    <div class="circle"></div>
</body>
<style> .circle { width: 200px; height: 200px; border: 10px solid; border-radius: 50%; border-bottom-color: blue; border-top-color: brown; border-left-color: chartreuse; border-right-color: black; border-bo } </style>
</html>
复制代码

展示效果以下图所示：post

可是虽然能够设置圆环四个边界的颜色，可是CSS却不能够设置每一个边界的z-index，仅能够设置每一个方向边界的颜色。咱们注意到颜色可取值中有一个可取值为：transparent。所以，咱们考虑给每一个圆环上再覆盖一层一样的圆环，所以两个圆环相交实际多是3,4个圆环相交。spa

具体实现代码以下：.net

<!DOCTYPE html>

<head>
    <title>纯CSS实现奥运五环效果</title>
</head>

<body>
    <div style="position: absolute;border: 1px solid red;height: 400px;">
        <div class="blue circle">
            <div class="blue-cover circle"></div>
        </div>
        <div class="black circle">
            <div class="black-cover circle"></div>
        </div>
         <div class="red circle">
            <div class="red-cover circle"></div>
        </div>
        <div class="yellow circle">
            <div class="yellow-cover circle"></div>
        </div>
        <div class="green circle">
            <div class="green-cover circle"></div>
        </div>
    </div>
    
</body>
<style> .circle { width: 200px; height: 200px; border: 10px solid red; border-radius: 50%; position: absolute; } .blue { border-color: blue; position: absolute; top: 0; left: 0; } .blue-cover { border-color: blue; z-index: 2; border-bottom-color: transparent; position: absolute; top: -10px; left: -10px; } .black { border-color: black; position: absolute; top: 0; left: 230px; } .black-cover { border-color: black; z-index: 2; border-left-color: transparent; position: absolute; top: -10px; left: -10px; } .red { border-color: red; position: absolute; top: 0; left: 460px; } .red-cover { border-color: red; z-index: 2; border-left-color: transparent; position: absolute; top: -10px; left: -10px; } .yellow { border-color: dodgerblue; position: absolute; top: 110px; left: 110px; } .yellow-cover { border-color: yellow; position: absolute; top: -10px; left: -10px; } .green { border-color: green; position: absolute; top: 110px; left: 340px; } .green-cover { border-color: green; z-index: 2; border-top-color: transparent; border-right-color: transparent; position: absolute; top: -10px; left: -10px; } </style>
<html>

</html>
复制代码

其中实现过程当中遇到了z-index的问题。code

参考文章：