純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

參考文章：