<!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. 转：深入理解jvm

    深入理解JVM 原文链接:http://www.cubrid.org/blog/dev-platform/understanding-jvm-internals 每个使用Java的开发者都知道Java ...

  2. SHOPEX快递单号查询插件圆通V8.2专版

    SHOPEX快递物流单号查询插件特色 本SHOPEX快递物流单号跟踪插件提供国内外近2000家快递物流订单单号查询服务例如申通快递.顺丰快递.圆通快递.EMS快递.汇通快递.宅急送快递.德邦物流.百世 ...

  3. npm 如何提升最新版本

    首先我们查看一下npm当前版本,打开cmd 运行命令: npm -v 如果不是最新版本,运行一下代码即可. npm install -g npm 这样npm就更新到最新版本了. 如果想更新到指定版本, ...

  4. phpcms2008网站漏洞如何修复 远程代码写入缓存漏洞利用

    SINE安全公司在对phpcms2008网站代码进行安全检测与审计的时候发现该phpcms存在远程代码写入缓存文件的一个SQL注入漏洞,该phpcms漏洞危害较大,可以导致网站被黑,以及服务器遭受黑客 ...

  5. Leecode刷题之旅-C语言/python-20.有效的括号

    /* * @lc app=leetcode.cn id=20 lang=c * * [20] 有效的括号 * * https://leetcode-cn.com/problems/valid-pare ...

  6. 糖果 南阳acm589

    糖果 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 topcoder工作室的PIAOYIi超级爱吃糖果,现在他拥有一大堆不同种类的糖果,他准备一口气把它们吃完,可是 ...

  7. 嵌入式框架Zorb Framework搭建五：事件的实现

    我是卓波,我是一名嵌入式工程师,我万万没想到我会在这里跟大家吹牛皮. 嵌入式框架Zorb Framework搭建过程 嵌入式框架Zorb Framework搭建一:嵌入式环境搭建.调试输出和建立时间系 ...

  8. python2.7入门---file（文件）&OS 文件&目录方法

        首先file 对象使用 open 函数来创建,下表列出了 file 对象常用的函数: 序号 方法及描述 1 file.close() 关闭文件.关闭后文件不能再进行读写操作. 2 file.f ...

  9. 5-sql语句

    1 [oracle@ocp ~]$ . oraenv # ORACLE_SID = [oracle] ? orcl The Oracle base has been set to /u01/app/o ...

  10. luogu2387 [NOI2014]魔法森林

    这题和水管局长很像,枚举 \(a\) 的边然后维护关于 \(b\) 的最小生成树就可以了. 1A呐>_< #include <algorithm> #include <i ...