效果图
代码 - 以蓝色和黄色的环为例
<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离想到即可做到太远,限制在帝国...
仿站小工具是通过网址下载静态网页的工具。从输入的网址下载html代码,提取出JS、Css、Image、Picture、Flash等静态文件网址,再从下载完好的Cs...
企业仿站制作的周期一般是3-5天,主要取决于被仿网站的确定,甚至功能的新增,确定以后一般3-4天网站就可以仿制完成。仿站基本流程第一步:客户提供...
1、普通型仿制型网站企业网站报价:什么上普通型建站呢?普通型建站指是只做展示公司资料及公司产品,没有什么视觉要求只是一般,这类网站叫普通型...
做网站总的就是说需要域名 空间 程序3样内容。1.域名解析空间2.空间绑定域名只有这样你的网站输入域名才能才能被人找到,域名是买的,空间也是...
曾经非常多的关于工商银行的钓鱼网站,他们是利益和工商银行的页面一样,并且域名也差不多,利用不懂网络的人的心态去欺骗别人的工商银行账户和密...