使用CSS中clip-path属性实现奥运五环

最新推荐文章于 2023-09-13 18:06:19 发布

浮桥

最新推荐文章于 2023-09-13 18:06:19 发布

阅读量563

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_44801790/article/details/120454616

版权

今天偶然看见一个使用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 */
        .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 */
        .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 */
        .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属性的使用详解

浮桥

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
使用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, initi
复制链接

扫一扫