Div+Css(1):Div+Css中transparent制作奥运五环

浏览数：17 / 时间：2015年06月09日

<!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>