纯html+css实现奥运五环的示例代码


Posted in HTML / CSS onAugust 02, 2021

效果图

纯html+css实现奥运五环的示例代码

代码 - 以蓝色和黄色的环为例

<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);
}

环的交错效果解释

以蓝色和黄色的环为例:
蓝色的环为基准,黄色的环切割成两个部分,第一个部分在蓝色的环上面,第二个部分在蓝色的环下面。

纯html+css实现奥运五环的示例代码

画完蓝色和黄色的环以后,就可以继续画黑色的环。这次基准变成了黄色的环,要将黑色的环切割成两个部分。然后分别是绿色和红色的环,一样的原理。

完整代码

https://jsbin.com/duhubis/edit?html,css,output

到此这篇关于纯html+css实现奥运五环的示例代码的文章就介绍到这了,更多相关html+css 实现奥运五环内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
Mar 09 HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
使用CSS3创建动态菜单效果
Jul 10 HTML / CSS
canvas像素画板的实现代码
Nov 21 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
Jan 30 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 HTML / CSS
五分钟学会HTML5的WebSocket协议
Nov 22 HTML / CSS
html5默认气泡修改的代码详解
Mar 13 HTML / CSS
新的CSS 伪类函数 :is() 和 :where()示例详解
Aug 05 HTML / CSS
HTML+CSS实现导航条下拉菜单的示例代码
Aug 02 #HTML / CSS
CSS实现两列布局的N种方法
Aug 02 #HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
Aug 02 #HTML / CSS
纯html+css实现打字效果
html form表单基础入门案例讲解
Jul 21 #HTML / CSS
带你了解CSS基础知识,样式
Jul 21 #HTML / CSS
CSS实现隐藏搜索框功能(动画正反向序列)
Jul 21 #HTML / CSS
You might like
php addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
PHP中的类型约束介绍
2015/05/11 PHP
PHP使用ODBC连接数据库的方法
2015/07/18 PHP
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
js实现加载更多功能实例
2016/10/27 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
Vue实例的对象参数options的几个常用选项详解
2019/11/08 Javascript
vue图片上传组件使用详解
2019/12/23 Javascript
Vue $emit()不能触发父组件方法的原因及解决
2020/07/28 Javascript
利用python求相邻数的方法示例
2017/08/18 Python
Python实现读取及写入csv文件的方法示例
2018/01/12 Python
神经网络(BP)算法Python实现及应用
2018/04/16 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
python2.7的flask框架之引用js&amp;css等静态文件的实现方法
2019/08/22 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
keras slice layer 层实现方式
2020/06/11 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
如何通过python计算圆周率PI
2020/11/11 Python
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
广州一家公司的.NET面试题
2016/06/11 面试题
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
自查自纠整改报告
2014/11/06 职场文书
机动车交通事故协议书
2015/01/29 职场文书
2016党员党课心得体会
2016/01/07 职场文书
导游词之河北白洋淀
2020/01/15 职场文书
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs