效果图
代码 - 以蓝色和黄色的环为例
<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!
为什么制作网站地图?上次仿站网和大家说了什么是网站地图,今天我们来讲讲一个网站为什么制作网站地图呢?众所周知,网站地图要包括您的主要网...
如何选择好的专业的仿站品牌来建站,说到这里,很多人在这里询问价格之后就拿此价格去别家对比。然后哪家便宜就去哪家。当然我不觉得这样有错。...
帝国CMS,虽然官方的宣传语也是想到即可做到,但从我在对帝国CMS作一些简单功能需求的修改及插件开发来看,帝国CMS离想到即可做到太远,限制在帝国...
定制网站:顾名思义就是你想要什样的就做成什么样的,由客户来提出要求,从前期制作到后期完善修改。模板网站:由服务商提供一些可供浏览的网站样式...
网站的功能是可以仿下来的,只是功能性的东西属于二次开发,不是网站拷贝那么简单。原网站的一些功能开发我们经常遇到的就是培训学员的证书查询...
怎么仿站应该是每一个希望学习仿站的人都必须要了解的。如果不在仿站之前了解一下,仿站可能不成功,或者仿出来的网站没有真正的意义。下面仿...