效果图
代码 - 以蓝色和黄色的环为例
<div class="container">
<div class="ring blue"></div>
<div class="ring yellow yellow1"></div>
<div class="ring yellow yellow2"></div>
</div>
.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);
}
以蓝色和黄色的环为例: 蓝色的环为基准,黄色的环切割成两个部分,第一个部分在蓝色的环上面,第二个部分在蓝色的环下面。
画完蓝色和黄色的环以后,就可以继续画黑色的环。这次基准变成了黄色的环,要将黑色的环切割成两个部分。然后分别是绿色和红色的环,一样的原理。
https://jsbin.com/duhubis/edit?html,css,output
到此这篇关于纯html+css实现奥运五环的示例代码的文章就介绍到这了,更多相关html+css 实现奥运五环内容请搜索仿站网www.ecmsw.cn以前的文章或继续浏览下面的相关文章,希望大家以后多多支持仿站网www.ecmsw.cn!
网站分为动态网站,和静态网站。动态网站又称为交互式网站,也就是可以让访问者参与,典型的就百度知道,你可在这里提问题,别人可回答问题,管理员可审...
仿站的价格根据工作量的多少来决定的。一般最低300即可。最高那就没有上限了。多数用户仿站的价格一般在1500左右的样子。300元的价格,一般就...
说实话,您要的不只是网站,要的是 能带来客户的网络平台。☉ 不知道怎么利用网站赚钱?☉ 有了网站,不过网站实在看不下去?☉ 网站没有功能,时常出...
今天仿站小编介绍站内站外需要注意的事项才能提高百度权重相关内容的介绍,感兴趣的朋友们可以跟着小编去下文了解一下哦看一个网站的受欢迎程...
仿站人员都知道仿站挣的就是时间钱,我们做的越快才能挣的越多,那么提高我们正常的仿站效率是每个仿站人员必修技能,那么快速仿站有哪些技巧呢和...
现在随着移动端流量的暴增,很多用户意识到移动端的推广是现在网络推广的主力,那么想要在移动蓝海市场获得自己的一块领地,首先需要一个手机...