<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>五环</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body,
html {
height: 100%;
width: 100%;
}
ul {
list-style: none;
position: absolute;
display: flex;
/*justify-content: center;
align-items: center;*/
}
li {
height: 12em;
width: 12em;
position: absolute;
z-index: 10;
}
li:after {
content: '';
height: 100%;
width: 100%;
display: block;
border: 1.4em solid red;
border-radius: 6em;
box-sizing: border-box;
}
li.blue {
top: 0em;
left: 0em;
}
li.blue:after{
border-color: blue;
}
li.blue.new{
z-index: 30;
}
li.blue.new:after{
border-bottom-color:transparent ;
}
li.yellow {
top: 5.7em;
left: 6.8em;
}
li.yellow.new{
z-index: 15;
}
li.yellow.new:after{
border-right-color: transparent;
}
li.yellow:after{
border-color: yellow;
}
li.black {
top: 0em;
left: 13.6em;
}
li.black:after{
border-color: black;
}
li.green {
top: 5.7em;
left: 20.4em;
z-index: 9;
}
li.green:after{
border-color: green;
}
li.green.new{
z-index: 11;
}
li.green.new:after{
border-top-color: transparent;
}
li.red {
top: 0em;
left: 27.2em;
z-index: 8;
}
li.red:after{
border-color: red;
}
li.red.new{
z-index: 16;
}
li.red.new:after{
border-left-color: transparent;
}
</style>
</head>
<body>
<ul>
<li class="blue">
</li>
<li class="blue new">
</li>
<li class="yellow">
</li>
<li class="yellow new">
</li>
<li class="black">
</li>
<li class="green">
</li>
<li class="green new">
</li>
<li class="red">
</li>
<li class="red new">
</li>
</ul>
</body>
</html>
316
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
