<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>奥运五环</title>

  <style type="text/css">

    body{

        margin: 20px;

        background-color: #efefef;

    }

    ul.flag{

        list-style: none;

        position: relative;

        margin: 20px auto;

    }

    .flag li,.flag li:before,.flag li:after{

        -webkit-border-radius: 6em;

        -moz--border-radius: 6em;

        border-radius: 6em;

        position: absolute;

    }

    .flag li{

        width: 12em;

        height: 12em;

        left: 0;

        top: 0;

        font-size: 1em;

    }

    .flag li:after{

        display: block;

        content: "";

        top: -0.1em;

        left: -0.1em;

        right: -0.1em;

        bottom: -0.1em;

        border: solid 1.4em black;

    }

    .flag .blue{z-index: 10;left:0;top: 0;}

    .flag .yellow{z-index: 20;left: 6.8em;top: 5.7em;}

    .flag .black{z-index: 21; left: 13.6em;top: 0;}

    .flag .green{z-index: 20; left: 20.4em;top: 5.7em;}

    .flag .red{z-index: 10;left: 27.2em;top: 0px;}

    .flag .blue:after{border-color: blue;}

    .flag .yellow:after{border-color: yellow;}

    .flag .black:after{border-color: black;}

    .flag .green:after{border-color: green;}

    .flag .red:after{border-color: red;}

    /*蓝色压住黄色*/

    .flag .blue.alt {z-index: 24;}

    .flag .blue.alt, .flag .blue.alt:before, .flag .blue.alt:after{

        border-top-color: transparent;

        border-left-color: transparent;

        border-bottom-color: transparent;

    }

    /* 黄色压住黑色 */

    .flag .yellow.alt { z-index: 23; }

    .flag .yellow.alt, .flag .yellow.alt:before, .flag .yellow.alt:after {

        border-right-color: transparent;

        border-left-color: transparent;

        border-bottom-color: transparent;

    }

    /* 绿色压住黑色  */

    .flag .green.alt { z-index: 23; }

    .flag .green.alt,.flag .green.alt:before,.flag .green.alt:after {

        border-top-color: transparent;

        border-right-color: transparent;

        border-bottom-color: transparent;

    }

    /* 红色压住绿色  */

    .flag .red.alt { z-index: 23; }

    .flag .red.alt, .flag .red.alt:before,.flag .red.alt:after {

        border-top-color: transparent;

        border-right-color: transparent;

        border-left-color: transparent;

        }

  </style>

 </head>

 <body>

  <ul class="flag">

    <li class="blue"></li>

    <li class="blue alt"></li>

    <li class="yellow"></li>

    <li class="yellow alt"></li>

    <li class="black"></li>

    <li class="green"></li>

    <li class="green alt"></li>

    <li class="red"></li>

    <li class="red alt"></li>

  </ul>

 </body>

</html>

Div+Css中transparent制作奥运五环的更多相关文章

  1. div+css中常见的浏览器兼容性处理-兼容不同浏览器

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! div+cs ...

  2. css中border制作各种形状

    css利用border制作各种形状的原理如图: 使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图: 没有了上border如图所示: 再设置border的宽度 ...

  3. 如何在Html的div+css中去除<li>标签前面小黑点,和ul、LI部分属性方法

    div是很多人做网站都会用到的,但在显示效果时前面总是会有一个小黑点,这个效果很多人不想要,但又不知到如何去除,然而我们可以用以下方法来清除. 1.在CSS中写入代码.找到相关性的CSS,在..li和 ...

  4. DIV+CSS中的滤镜和模糊

    在div+css中,经常会用到div和span 当内容比较多的时候,会用到div 当内容比较少的时候,会用到span 来看下面的代码: <!DOCTYPE html> <html&g ...

  5. DIV+CSS中标签ul ol li dl dt dd用法

    ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...

  6. DIV+CSS 中的 overflow:hidden

    overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. 一提到清除浮动,我们就会想到另外一个CSS样式 ...

  7. DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)

    css中cursor属性详解-鼠标移到图片变换鼠标形状   语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...

  8. 用html和css制作奥运五环

    <html><head><meta charset="utf-8"> <style>.circle1,.circle2,.circl ...

  9. DIV+CSS中标签dl dt dd常用的用法

    转自:http://smallpig301.blog.163.com/blog/static/9986093201010262499229/ < dl>< /dl>用来创建一个 ...

随机推荐

  1. 【ospf-基础配置】

    ospf开放最短路径优先基本配置{ ospf cost :配置ospf接口的优先级 ospf dr-priority :配置路径花费值 ospf router_id:创建ospf的进程号 area a ...

  2. U盘被分区后恢复方法

    一:运行cmd 二:输入diskpart,按enter. 三:输入list disk,按enter. 四:选择优U盘,输入select disk X(X代表磁盘后面的数字0.1,可磁盘的大小来判断数字 ...

  3. Mysql错误积累001-load data导入文件数据出现1290错误

    错误出现情景 在cmd中使用mysql命令,学生信息表添加数据.使用load data方式简单批量导入数据. 准备好文本数据: xueshengxinxi.txt 文件  数据之间以tab键进行分割 ...

  4. php 无限参数方法

    在很多项目开发中经常会用到共用方法但是参数不固定,每个参数都创建一遍阅读性不好,后期维护也麻烦,PHP有获取传入参数的方法,记录参考一下.这里有两个方法 <?php 方法一: #不指定参数个数方 ...

  5. 中恳中笨 搭建flask封装环境

    话不多说,先干再说..... 打开pycharm,创建一个关于flask的项目 2.创建一个App的文件包 3.把staic和templates文件包拖进App里 4.把app.py文件改为manag ...

  6. POJ3177 边双连通分量

    Redundant Paths Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 18580   Accepted: 7711 ...

  7. 【动态规划】[UVA1025]A Spy in the Metro 城市里的间谍

    参考:https://blog.csdn.net/NOIAu/article/details/71517440 https://blog.csdn.net/c20180630/article/deta ...

  8. RedHat6.4 安装yum源

    主要参考: http://blog.itpub.net/25313300/viewspace-708509/ http://blog.sina.com.cn/s/blog_50f908410101ct ...

  9. 也谈js传值和传址

    通常的认识就是基本的数值元素是传值,对象等复杂结构传址,无需争论,一试便知. 首先是数值 var a = 1 var b = a a = 2 console.log(a) console.log(b) ...

  10. 利尔达CC3200模块烧写程序笔记

    1. 硬件使用利尔达的CC3200模块,仿真下载器使用利尔达的FTDI仿真器,硬件完全兼容官方的仿真器.仿真器支持IAR的调试,单步运行等操作. 2. 硬件连接接线说明: RXD, TXD, GNG, ...