<!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. 使用Python对MySQL数据库操作

    本文介绍Python3使用PyMySQL连接数据库,并实现简单的增删改查. 什么是PyMySQL? PyMySQL是Python3.x版本中用于连接MySQL服务器的一个库,Python2.x中则使用 ...

  2. linux命令之文件系统权限操作常用命令

    1.   umask:设置权限掩码 语法:umask [参数] 命令说明:umask可以单独使用,可以设置目录与文件的默认权限,默认权限掩码是022,所以默认目录权限是777-022=755,读权限是 ...

  3. sax技术解析xml下jaxp解析器详细代码

    *解析xml的两种技术dom和sax dom:根据xml的层级结构在内存中分配一个树形结构,把xml标签,属性,文本封装成对象. sax方式:事件驱动,边读边解析. 在javax.xml.parser ...

  4. 【ospf-vlink虚拟连接】

    根据项目需求,搭建好如下拓扑图 配置rt1的环回 口地址及g0/0/0的ip地址 配置rt1的ospf 配置rt2的环回口地址和g0/0/1及g0/0/0的ip地址 \ 配置rt2的ospf 同理,配 ...

  5. PHP+AJAX开发幸运大转盘抽奖

    PHP+AJAX开发幸运大转盘抽奖,通过奖品库存.中奖次数来计算中奖概率 奖品设置 $prizes = array( 0 => array( "id" => 0, // ...

  6. 官方yum源安装选择所需版本mysql数据库并初始化(yum默认安装的是最新版MySQL8.+)

    在官网是找不到5.x系列的域名源的,系统默认是安装的oracle数据库,在安装前需要删除默认的 以下教程来源于官网说明 先去官网下载yum源,地址 https://dev.mysql.com/down ...

  7. python三大神器之生成器

    生成器Generator: 本质:迭代器(所以自带了__iter__方法和__next__方法,不需要我们去实现) 特点:惰性运算,开发者自定义 在python中有三种方法来获取生成器: 1.通过生成 ...

  8. linux ln 建立软链接-- 基于dubbo-zookeeper服务的 服务jar 引用公共的 lib

    对于ln命令网上有很多的教程,这里不再复述, 其基本目的是:多个文件夹公用一个文件夹的里的文件. 其基本命令格式: ln [option] source_file dist_file (source_ ...

  9. consul 使用方式

    1.在配置文件配置好的情况下,在运行 consul agent -server -datacenter=([xacl.json].[acl_datacenter]) -bootstrap -data- ...

  10. CSS3复选框动画

    本示例实现了两种单选按钮动画效果,一种是移动,一种是滑块,以下是html布局以及css样式 html:这里使用了label标签的for属性,以此来绑定radio <div class=" ...