纯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 相关文章推荐
CSS3教程(2):网页边框半径和网页圆角
Apr 02 HTML / CSS
纯CSS3打造动感漂亮时尚的扇形菜单
Mar 18 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 HTML / CSS
CSS3 linear-gradient线性渐变生成加号和减号的方法
Nov 21 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
利用HTML5的新特点实现图片文件异步上传
May 29 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
从零实现一个自定义html5播放器的示例代码
Aug 01 HTML / CSS
HTML5自定义视频播放器源码
Jan 06 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 HTML / CSS
HTML基础详解(下)
Oct 16 HTML / CSS
什么是css原子化,有什么用?
Apr 24 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
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
jquery 3D球状导航的文章分类
2010/07/06 Javascript
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
javascript常用的方法分享
2015/07/01 Javascript
jquery UI Datepicker时间控件冲突问题解决
2016/12/16 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
详细分析React 表单与事件
2020/07/08 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
2020/09/10 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
python实现微信接口(itchat)详细介绍
2017/10/23 Python
django用户登录和注销的实现方法
2018/07/16 Python
Python创建数字列表的示例
2019/11/28 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
财会自我鉴定范文
2013/12/27 职场文书
出国考察邀请函
2014/01/21 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
火烧圆明园观后感
2015/06/03 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery
详解MySQL 用户权限管理
2021/04/20 MySQL
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
MySQL 覆盖索引的优点
2021/05/19 MySQL
python playwright之元素定位示例详解
2022/07/23 Python