console
<div class="base">
<div class="silver">
<div class="linel"></div>
<div class="liner"></div>
<div class="trapezoid">
<div class="hu"></div>
<div class="hl"></div>
</div>
<div class="linec">
<div class="v"></div>
</div>
</div>
</div>
.base {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
margin: -8px;
background: #000;
}
.silver {
width: 440px;
height: 250px;
background: rgb(45,72,96);
background: linear-gradient(45deg, rgba(239,243,247,1) 0%,
rgba(45,72,96,1)20%, rgba(195,216,227,1) 30%,
rgba(239,243,247,1) 40%, rgba(45,72,96,1) 50%, rgba(195,216,227,1) 80%,
rgba(45,72,96,1) 100%);
}
.trapezoid {
width: 140px;
height: 0;
border-left: 0px solid transparent;
border-right: 80px solid transparent;
border-bottom: 170px solid #000;
position: relative;
top: -140px;
}
.trapezoid:after {
content: '';
width: 140px;
height: 0;
border-left: 80px solid transparent;
border-right: 0px solid transparent;
border-bottom: 170px solid #000;
position: absolute;
left: 220px;
top: 1px;
}
.linel{
width: 50px;
height: 110px;
background: #000;
transform: rotate(-15deg);
position: relative;
right: 35px;
}
.linel:before{
content: '';
position: absolute;
transform: rotate(15deg);
width: 110px;
height: 0;
border-left: 0px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid #000;
left: 40px;
top: 40px;
}
.linel:after{
content: '';
position: absolute;
transform: rotate(15deg);
width: 115px;
height: 0;
border-left: 0px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid #000;
left: 40px;
top: 70px;
}
.liner{
width: 50px;
height: 110px;
background: #000;
transform: rotate(15deg);
position: relative;
left: 420px;
top: -110px;
}
.liner:before{
content: '';
position: absolute;
transform: rotate(-15deg);
width: 110px;
height: 0;
border-left: 5px solid transparent;
border-right: 0px solid transparent;
border-bottom: 10px solid #000;
right: 40px;
top: 40px;
}
.liner:after{
content: '';
position: absolute;
transform: rotate(-15deg);
width: 115px;
height: 0;
border-left: 5px solid transparent;
border-right: 0px solid transparent;
border-bottom: 10px solid #000;
right: 40px;
top: 70px;
}
.linec{
height: 200px;
width: 10px;
background: #000;
position: relative;
bottom: 410px;
left: 200px;
transform: rotate(25deg);
}
.v{
height: 0px;
width: 0px;
border-right: 40px solid transparent;
border-left: 40px solid transparent;
border-top: 90px solid #000;
position: relative;
top: 55px;
right: 75px;
transform: rotate(-25deg);
}
.v:before{
content: '';
position: absolute;
height: 30px;
width: 18px;
background: #000;
bottom: 85px;
right: 26px;
transform: rotate(-25deg);
}
.hu{
height: 60px;
width: 48px;
background: #000;
position: relative;
bottom: 65px;
left: 245px;
transform: skew(-25deg);
}
.hu:before{
content: '';
position: absolute;
height: 40px;
width: 20px;
background: #000;
left: 28px;
bottom: 50px;
}
.hl{
height: 150px;
width: 48px;
background: #000;
position: relative;
bottom: 50px;
left: 190px;
transform: skew(-25deg);
}