SOURCE

console 命令行工具 X clear

                    
>
console
<div class="base">
  <div class="cassette">
    <div class="tape">80's MIX
      <div class="hole">
        <div class="center"></div>
      </div>
    </div>
    <div class="dot"></div>
  </div>
</div>
.base {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  margin: -8px;
   background: #ffd6e4;
} 

.cassette {
 box-sizing: border-box;
 position: relative;
 width: 300px;
 height: 180px;
 background: #a0d8ef;
  border-radius: 12px;
}

.cassette:before,
.cassette:after {
 content: '';
 display: block;
 position: absolute;
 box-sizing: border-box;
}
.cassette:before {
 width: 200px;
 height: 40px;
 border: solid 2px #fff;
  top: 135px;
  left: 50px;
  border-radius: 5px;
}
.cassette:after {
  width: 10px;
 height: 10px;
 background: #fff;
  top: 145px;
  left: 100px;
  border-radius: 100px;
}

.tape{
  box-sizing: border-box;
 position: relative;
 width: 260px;
 height: 110px;
 background: #ffd6e4;
 left: 20px;
  top: 20px;
  text-align: center;
  font-family: Avenir;
  font-size: 23px;
  font-weight: bold;
  color: #ba91e2;
}
.tape:before,
.tape:after{
  content: '';
 display: block;
 position: absolute;
 box-sizing: border-box;
}
.tape:before{
  width: 260px;
 height: 50px;
 background: #fff;
  top: 30px;
}
.tape:after{
  width: 260px;
 height: 20px;
 background: #eb6ea0;
  top: 45px;
}

.hole{
  position: relative;
 width: 160px;
 height: 40px;
 background: #a0d8ef;
  border-radius: 12px;
  top: 10px;
  left: 52px;
  z-index: 2;
}
.hole:before,
.hole:after{
  content: '';
 position: absolute;
}
.hole:before{
  width: 30px;
 height: 30px;
 background: #fff;
  border-radius: 100px;
  left: 5px;
  top: 5px;
}
.hole:after{
  width: 30px;
 height: 30px;
 background: #fff;
  border-radius: 100px;
  right: 5px;
  top: 5px;
}

.center{
  position: relative;
  width: 40px;
 height: 20px;
  background: #fff;
  left: 60px;
  top: 10px;
}

.dot {
  position: relative;
  width: 10px;
 height: 10px;
 background: #fff;
  top: 35px;
  left: 190px;
  border-radius: 100px;
}
.dot:before,
.dot:after{
  content: '';
 position: absolute;
}
.dot:before{
  width: 10px;
 height: 10px;
 background: #fff;
  border-radius: 100px;
  right: 110px;
  top: 10px;
}
.dot:after{
  width: 10px;
 height: 10px;
 background: #fff;
  border-radius: 100px;
  left: 20px;
  top: 10px;
}