<!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. vuex重置所有state(可定制)

    在正式场景中我们经常遇到一个问题,就是登出页面或其他操作的时候,我们需要重置所有的vuex,让其变为初始状态,那么,就涉及到了多种方法:1.页面刷新: window.location.reload() ...

  2. 微信小程序终于审核过了

    终于,我做的微信小程序审核结束了,虽然被退回来两次,但是第三次还是审核通过了! 加油骚年,相信自己!! 有什么问题可以评论告诉我!!

  3. python数据类型及其特有方法

    一.运算符 in方法 "hello" in "abcdefghijklmnopqrstuvwxyz" "li" in ["gg&q ...

  4. THINKPHP网站漏洞怎么修复解决

    THINKPHP漏洞修复,官方于近日,对现有的thinkphp5.0到5.1所有版本进行了升级,以及补丁更新,这次更新主要是进行了一些漏洞修复,最严重的就是之前存在的SQL注入漏洞,以及远程代码执行查 ...

  5. mysql5.7.19安装报错 无法定位程序输入点

    https://blog.csdn.net/t876587201/article/details/79503688

  6. Mysql通过Adjacency List(邻接表)存储树形结构

    转载自:https://www.jb51.net/article/130222.htm 以下内容给大家介绍了MYSQL通过Adjacency List (邻接表)来存储树形结构的过程介绍和解决办法,并 ...

  7. 一起来学习Shell脚本

    Shell脚本 Shell脚本(shell script),是一种为shell编写的脚本程序. 大家所说的shell通常都是指的shell脚本,但其实shell与shell脚本是两个不同的概念.由于习 ...

  8. Angularjs+bootstrap 实现横向滑屏

    本地环境: AngularJS v1.3.2 angular-ui-bootstrap Version: 0.12.0 - 2014-11-16 实现代码:Html部分 <div ng-cont ...

  9. 笔记-flask-原理及请求处理流程

    笔记-flask-原理及请求处理流程 1.      服务器声明及运行 最基本的flask项目代码如下 from flask import Flask app = Flask(__name__) @a ...

  10. 【转】mui 通过JSON动态的生成列表

    <script type="text/template" id="radio-tigan"> <%for(var i=0;i<recor ...