<!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. wordpress整站无损搬迁的几种方法 最后一种最完美

    网站建设之wordpress整站无损搬迁的几种方法 最后一种最完美 网站搬家,当我们更换php虚拟主机,空间升级或更好空间提供商都会发生,站长们请注意,掌握网站迁移方法,是网站日常维护技术中必须掌握的 ...

  2. 初次了解MVC框架模式

    MVC框架:即Model.View.Controller即模型.视图.控制器. View层是界面,Model层是业务逻辑,Controller层用来调度View层和Model层,将显示界面和业务逻辑合 ...

  3. android Volley+Gson的使用

    听说Volley框架非常好用,今天试了一下post请求,果然如此,因为我传的是json获取的也是json所以就写了一种关于json的请求,其实其他的代码都差不多.首先要先创建一个全局的变量,请求入队列 ...

  4. jdk与tomcat的环境配置

    一.JDK的安装与配置 1.从官网下载jdk,注意是jdk不是jre.最好从官网下载,也可以直接度娘. 2.下载完毕后,安装jdk,​直接按照安装向导的提示安装即可,安装时可以自己选择安装路径,我的安 ...

  5. python构造二维列表以及排序字典

    1. 构造二维列表: 比如我现在需要一个100*100的二维列表: a = [] for i in range(100): a.append([]) for j in range(100): a[i] ...

  6. JavaSE基础复习---Class类与反射机制

    ---恢复内容开始--- 目录: 1.java.lang.class类 2.Java中的反射机制 3.运行时与编译时概念 1. java.lang.class类 Java程序在运行时,Java运行时系 ...

  7. 工作中使用的linux命令汇总

    ln -s  /usr/local/tomcat/ ./tomcat   创建软连接到/usr/local/tomcat tar -zxvf apache-kylin-2.4.0-bin-hbase1 ...

  8. HM16.0帧内预测重要函数笔记

    Void TEncSearch::estIntraPredQT   亮度块的帧内预测入口函数 Void TComPrediction::initAdiPatternChType 获取参考样本点并滤波 ...

  9. 为什么我要放弃javaScript数据结构与算法（第一章）—— JavaScript简介

    数据结构与算法一直是我算比较薄弱的地方,希望通过阅读<javaScript数据结构与算法>可以有所改变,我相信接下来的记录不单单对于我自己有帮助,也可以帮助到一些这方面的小白,接下来让我们 ...

  10. SQL数据库 面试题

    一.sql理论题 1．触发器的作用? 答:触发器是一中特殊的存储过程,主要是通过事件来触发而被执行的.它可以强化约束,来维护数据的完整性和一致性,可以跟踪数据库内的操作从而不允许未经许可的更新和变化. ...