level 1
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.box{
width: 122px;
height: 658px;
margin: auto;
overflow: hidden;
}
.box1{
width: 118px;
height: 648px;
margin-left: 10px;
background-color: transparent;
border: 1px solid #37260f;
border-right: none;
border-top-left-radius: 22px;
-webkit-border-top-left-radius: 22px;
border-bottom-left-radius: 22px;
-webkit-border-bottom-left-radius: 22px;
box-shadow: 5px 5px 5px 5px #7c7c7c;
}
.box2{
width: auto;
height: 100%;
position: relative;
border-right: none;
border-top-left-radius: 22px;
border-bottom-left-radius: 22px;
}
span{
display: block;
position: absolute;
}
.line1{
width: 6px;
height: calc(100% - 42px);
left: 0;
top: 21px;
background-image: linear-gradient(#8dbd78, #49793d);
}
.line1::before{
content: '';
width: 21px;
height: 21px;
display: block;
position: absolute;
left: 0;
top: -21px;
background-color: #8dbd78;
border-top-left-radius: 100%;
}
.line1::after{
content: '';
width: 21px;
height: 21px;
display: block;
position: absolute;
left: 0;
bottom: -21px;
background-color: #49793d;
border-bottom-left-radius: 100%;
}
.line2{
width: calc(100% - 21px);
height: 6px;
left: 21px;
top: 0;
background-color: #8dbd78;
}
.line3{
width: calc(100% - 21px);
height: 6px;
left: 21px;
bottom: 0;
background-color: #49793d;
}
.box3{
width: 68px;
height: calc(100% - 12px);
display: block;
position: absolute;
top: 6px;
left: 6px;
background-image: linear-gradient(#6e955d, #396331);
border-radius: 15px 0 0 15px;
box-shadow: inset 0 0 6px 0 #33532b;
}
.box4{
width: calc(100% - 64px);
height: calc(100% - 12px);
position: absolute;
left: 64px;
top: 6px;
}
.box4 .line4{
width: 25px;
height: 15px;
position: relative;
margin-left: -5px;
overflow: hidden;
z-index: 100;
}
.box4 .line4::after{
content: '';
width: 15px;
height: 15px;
display: block;
position: absolute;
bottom: 0;
left: 5px;
background-color: transparent;
border-top-left-radius: 100%;
border-left: 5px solid #8dbd78;
border-top: 5px solid #8dbd78;
box-shadow: 0px 0px 6px 0 #33532b;
}
.box4 .line5{
width: 5px;
height: calc(100% - 30px);
position: relative;
background-image: linear-gradient(#8dbd78, #49793d);
box-shadow: 0 0 6px 0 #33532b;
}
.box4 .line6{
width: 25px;
height: 15px;
position: relative;
margin-left: -5px;
overflow: hidden;
}
.box4 .line6::after{
content: '';
width: 15px;
height: 15px;
display: block;
position: absolute;
top: 0;
left: 5px;
background-color: transparent;
border-bottom-left-radius: 100%;
border-left: 5px solid #49793d;
border-bottom: 5px solid #49793d;
box-shadow: 0px 0px 6px 0 #33532b;
}
.box5{
width: calc(100% - 10px);
height: 100%;
position: absolute;
left: 5px;
top: 0;
border: 6px solid #868686;
border-right: none;
border-radius: 15px 0 0 15px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<div class="box2">
<span class="line1"></span>
<span class="line2"></span>
<span class="line3"></span>
<span class="box3"></span>
<div class="box4">
<span class="line4"></span>
<span class="line5"></span>
<span class="line6"></span>
<div class="box5"></div>
</div>
</div>
</div>
</div>
</body>
</html>
2021年05月14日 05点05分