生活随笔
收集整理的這篇文章主要介紹了
使用CSS中clip-path属性实现奥运五环
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
今天偶然看見一個使用css實現奧運五環的效果，感覺還挺新奇的，參考了別人連接好的兩個環，自己嘗試將剩下的三個環連接上。其主要是使用到了一個css：clip-path的polygon屬性。
完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>奧運五環
</title><style>.container{position:relative;margin: 50px;}.ring {width: 100px;height: 100px;border-radius: 50%;position: absolute;border-style: solid;border-width: 10px;}.blue {border-color: #0180C3;top: 0;left: 0;z-index: 0;}.yellow {border-color: #FEB131;left: 70px;top: 60px;}.yellow1 {z-index: 1;clip-path: polygon(0 0, 100% 100%, 0 100%);}.yellow2 {z-index: -1;clip-path: polygon(0 0, 100% 100%, 100% 0);}.black {border-color: #0c0c0c;left: 140px;top: 0px;}.black1 {z-index: -2;clip-path: polygon(0 0, 0 100%, 100% 0);}.black2 {z-index: -1;clip-path: polygon(100% 100%, 0 100%, 100% 0);}.green {border-color: #03a70c;left: 210px;top: 60px;}.green1 {z-index: -3;clip-path: polygon(0 0, 100% 100%, 100% 0);}.green2 {z-index: 1;clip-path: polygon(0 0, 100% 100%, 0 100%);}.red {border-color: #d60303;left: 280px;top: 0px;}.red1 {z-index: -3;clip-path: polygon(0 0, 0 100%, 100% 0);}.red2 {z-index: -4;clip-path: polygon(100% 100%, 0 100%, 100% 0);}</style>
</head><body><div class="container"><div class="ring blue"></div><div class="ring yellow yellow1"></div><div class="ring yellow yellow2"></div><div class="ring black black1"></div><div class="ring black black2"></div><div class="ring green green1"></div><div class="ring green green2"></div><div class="ring red red1"></div><div class="ring red red2"></div></div>
</body>
</html>
雖然效果寫了出來，但是對該屬性還是不是很了解。。。
最后個人感覺就是設置一些坐標點，會自動保留改坐標點連接出來的內部圖片，刪除外部圖片。
對于該屬性還有其他的，我也只是了解了一下，沒有具體寫案例，但是我之前看到一篇文章感覺看了之后有一定的了解。鏈接如下：
CSS中clip-path屬性的使用詳解
總結
以上是生活随笔為你收集整理的使用CSS中clip-path属性实现奥运五环的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
