<ul class="flag">   
  <li class="blue"></li>   
  <li class="blue alt"></li>   
  <li class="yellow test"></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 {
    background: tan;
}

.flag li {
    position: absolute;
    border-radius: 6em;
    border: solid 1em;
    width: 10em;
    height: 10em;
    list-style-type: none;
}

.flag .blue {
    z-index: 10;
    left: 0;
    top: 0;
    border-color: blue;
}

.flag .yellow {
    z-index: 20;
    left: 6.8em;
    top: 5.7em;
    border-color: yellow;
}

.flag .black {
    z-index: 21;
    left: 13.6em;
    top: 0;
    border-color: black;
}

.flag .green {
    z-index: 20;
    left: 20.4em;
    top: 5.7em;
    border-color: green;
}

.flag .red {
    z-index: 10;
    left: 27.2em;
    top: 0px;
    border-color: red;
}

li:after {
    position: absolute;
    content: "";
    display: block;
    top: 0em;
    left: 0em;
    right: 0em;
    bottom: 0em;
    border: 0.3em solid #eee;
    border-radius: 6em;
}

li:before {
    position: absolute;
    content: "";
    display: block;
    border: 0.3em solid #eee;
    border-radius: 12em;
    top: -1em;
    right: -1em;
    bottom: -1em;
    left: -1em;
}

/* 蓝色压住黄色 */
.flag .blue.alt {
    z-index: 24;
}

.flag .blue.alt,
.blue.alt:after,
.blue.alt:before {
    border-top-color: transparent;
    border-left-color: transparent;
    border-bottom-color: transparent;
}

/* 黄色压住黑色 */
.flag .yellow.alt {
    z-index: 23;
}

.flag .yellow.alt,
.yellow.alt:after,
.yellow.alt:before {
    border-right-color: transparent;
    border-left-color: transparent;
    border-bottom-color: transparent;
}

/* 绿色压住黑色  */
.flag .green.alt {
    z-index: 23;
}

.flag .green.alt,
.green.alt:after,
.green.alt:before {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
}

/* 红色压住绿色  */
.flag .red.alt {
    z-index: 23;
}

.flag .red.alt,
.red.alt:after,
.red.alt:before {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
}