SOURCE

console 命令行工具 X clear

                    
>
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);
}