SOURCE

console 命令行工具 X clear

                    
>
console
.container
 .firstPillar
 .stair
 .stair2
 .shadow
 .thing
 .bigPillar
  .opening
   .triangle
   .shadow2
    .cut
   .shadow3 
 .bigPillarAfter
 .smallPillar
  .staircut
  .staircut.two
  .staircut.three 
  .staircut.four
 .smallPillarAfter
 .thing2
 .shadow-behind
  .tri
 .secondStair
 .secondStairMain
 .staircut2.five
 .staircut2.six
 .staircut2.seven
 .stairLast
 .lastStairPillar
 .thirdPillarAfter
 .thing4
 .rect
 .lastPillar
 .lastPillarAfter
 .finish
 .lastThing
 .lastThing2
 .smallThing
 .line
:root {
  --pink-light: #f487a7;
  --pink-medium: #b15892;
  --pink-dark: #6b0c66;
}
body {
  height: 100%;
  margin: 0;
  width: 100%;
}

.container {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: -20;
  background-color: #3b89f1;
}

.firstPillar {
  position: absolute;
  background-color: transparent;
  height: 40vmin;
  width: 7vmin;
  top: 20%;
}
.firstPillar::before {
  content: "";
  position: absolute;
  background-color: #ffffff;
  height: 40vmin;
  width: 7vmin;
  clip-path: polygon(0 0, 100% 13%, 100% 100%, 0% 100%);
  left: 100%;
}

.firstPillar::after {
  content: "";
  position: absolute;
  background-color: var(--pink-light);
  height: 40vmin;
  width: 7vmin;
  clip-path: polygon(0 10%, 100% 0, 100% 100%, 0% 100%);
  left: 0%;
}
.stair {
  position: absolute;
  clip-path: polygon(
    0 0,
    18% 0,
    18% 16%,
    62% 16%,
    62% 33%,
    100% 34%,
    100% 93%,
    0 87%
  );
  height: 14vmin;
  width: 15vmin;
  background-color: var(--pink-light);
  top: calc(20% + 37vmin);
  left: 6vmin;
}

.stair2 {
  position: absolute;
  background-color: var(--pink-light);
  top: calc(20% + 40vmin);
  height: 10vmin;
  width: 10vmin;
}

.shadow {
  clip-path: polygon(100% 6%, 29% 15%, 0 10%, 0 0);
  position: absolute;
  width: 21vmin;
  height: 10vmin;
  top: calc(20% + 49.3vmin);
  background-color: #892059;
}

.thing {
  position: absolute;
  height: 40vmin;
  width: 4vmin;
  background-color: #ffffff;
  top: calc(20% + 40vmin);
}

.thing::before {
  background-color: var(--pink-medium);
  content: "";
  height: 30vmin;
  width: 17vmin;
  position: absolute;
  left: 100%;
  top: 25%;
  z-index: -10;
}


.bigPillar {
  height: 97vmin;
  width: 40vmin;
  background-color: var(--pink-light);
  position: absolute;
  left: 19vmin;
  bottom: 0;
  clip-path: polygon(0 15%, 100% 0, 100% 100%, 0% 100%);
}

.bigPillarAfter {
  position: absolute;
  background-color: white;
  clip-path: polygon(0 0, 100% 8%, 100% 100%, 0% 100%);
  height: 97vmin;
  bottom: 0;
  width: 6vmin;
  left: 58.7vmin;
}
.opening {
  clip-path: polygon(0 5%, 100% 0, 100% 100%, 0% 100%);
  position: absolute;
  height: 80vmin;
  width: 10vmin;
  bottom: 0;
  left: calc(50% - 5vmin);
  background-color: #feb2d1;
}
.triangle {
  position: absolute;
  border-top: 3vmin solid transparent;
  border-bottom: 3vmin solid transparent;
  border-left: 6vmin solid #b55e95;
  top: 5%;
}

.shadow2 {
  clip-path: polygon(0 5%, 100% 0%, 100% 100%, 0 85%);
  position: absolute;
  height: 30vmin;
  width: 4vmin;
  background-color: #b55e95;
  right: 0;
  top: 7%;
}
.cut {
  clip-path: polygon(0 13%, 100% 0%, 100% 78%, 0 100%);
  position: absolute;
  height: 10vmin;
  width: 2vmin;
  background-color: #ffffff;
  left: calc(50% - 1vmin);
}

.shadow3 {
  clip-path: polygon(0 0, 100% 13%, 100% 100%, 0% 100%);
  position: absolute;
  height: 30vmin;
  width: 4vmin;
  bottom: 0;
  right: 0;
  background-color: #892059;
}
.smallPillar {
  clip-path: polygon(0 12%, 100% 0%, 100% 100%, 0 85%);
  position: absolute;
  height: 37vmin;
  width: 12vmin;
  background-color: #b55e95;
  left: 64.7vmin;
  top: 25vmin;
}

.smallPillarAfter {
  clip-path: polygon(0 11%, 100% 0%, 100% 98%, 0% 100%);
  position: absolute;
  height: 20vmin;
  width: 8vmin;
  background-color: #b55e95;
  left: 76vmin;
  top: 41.7vmin;
}

.staircut {
  clip-path: polygon(0 0, 100% 17%, 100% 80%, 0% 100%);
  background-color: white;
  position: absolute;
  height: 2.5vmin;
  width: 1.1vmin;
  top: 12vmin; 
  left: 1vmin;
}
.two {
  top: 14vmin;
  left: 3.5vmin;
}
.three {
  top: 16vmin;
  left: 6vmin;
}
.four {
  top: 18vmin;
  left: 8.5vmin;
}

.thing2{
  position: absolute;
  height:6vmin;
  width:10vmin;
  background-color: var(--pink-dark);
  clip-path: polygon(0 0, 76% 0, 100% 42%, 24% 46%);  
  left: 76.4vmin;
  top:61.3vmin;
  transform: rotate(-3deg);
}
.shadow-behind{
    height:43vmin;
  width:19vmin;
  position: absolute;
  background-color: #8a1167;
  left:65vmin;
  bottom: 0;
  z-index:-20;
}

.shadow-behind::after{
  content:"";
    height:39vmin;
  width:12vmin;
  position: absolute;
  background-color: #8a1167;
  left:100%;
  bottom: 0;
  z-index:-20;
}


.secondStair{
    clip-path: polygon(0 0, 100% 7%, 100% 100%, 0% 100%);
  position: absolute;
  height:15vmin;
  width:2vmin;
  top:60vmin;
  left:65vmin;
  background-color: var(--pink-medium);
}

.secondStairMain{
  clip-path: polygon(24% 0, 24% 23%, 46% 23%, 46% 43%, 61% 43%, 61% 62%, 100% 62%, 100% 100%, 0 100%, 0 0);
  top:69vmin;
  left:65vmin;
  height:8vmin;
  width:18vmin;
  position: absolute;
  background-color: var(--pink-medium);
}

.staircut2{
  background-color: var(--pink-light);
  clip-path: polygon(0 0, 100% 10%, 100% 100%, 0% 100%);
  height:1.7vmin;
  width:1vmin;
  position: absolute;
}
.five{
  top:69.1vmin;
  left:69.2vmin;
}

.six{
  top:70.7vmin;
  left:73.1vmin;
}

.seven{
  top:72.3vmin;
  left:76vmin;
}

.stairLast{
   position: absolute;
  clip-path: polygon(0 38%, 100% 38%, 100% 100%, 40% 100%, 0 59%);
  height:8vmin;
  width:18vmin;
  top:73.6vmin;
  left:65vmin;
   background-color: var(--pink-medium);
}

.lastStairPillar{
  clip-path: polygon(24% 0, 24% 23%, 46% 23%, 46% 43%, 61% 43%, 61% 62%, 100% 62%, 100% 100%, 0 100%, 0 0);
  position: absolute;
  background-color: var(--pink-medium);
  height:8vmin;
  width:18vmin;
  bottom:0;
  left:65vmin;
}
.rect{
  position: absolute;
  height:3vmin;
  width:4 vmin;
  background-color: var(--pink-light);
  bottom:0;
  left:83vmin;
}

.tri{
  position: absolute;
  height:6vmin;
  width:4vmin;
  top:11vmin;
  left:12vmin;
  background-color: var(--pink-dark);
  clip-path: polygon(18% 0, 0% 100%, 100% 100%);
}

.thirdPillarAfter{
  clip-path: polygon(0 0, 100% 13%, 100% 100%, 0% 100%);
   position: absolute;
  height:36.3vmin;
  width:13vmin;
  top:25vmin;
  left:76.5vmin;
  z-index:-20;
  background-color: white;
}

.thing4{
  clip-path: polygon(0 0, 100% 13%, 100% 100%, 0% 100%);
   position: absolute;
  height:8vmin;
  width:4vmin;
  top:74vmin;
  left:83vmin;
  background-color: white;
}

.lastPillar{
  clip-path: polygon(0 6%, 100% 0, 100% 100%, 0% 100%);
   position: absolute;
  height:48vmin;
  width:20vmin;
  bottom:0;
  left:93vmin;
  z-index:-30;
  background-color: var(--pink-light);
}
.lastPillarAfter{
  clip-path: polygon(0 0, 100% 13%, 100% 100%, 0% 100%);
   position: absolute;
  height:18vmin;
  width:2vmin;
  top:52vmin;
  left:113vmin;
  background-color: white;
}
.finish{
  clip-path: polygon(0 6%, 100% 0, 100% 100%, 0% 100%);
   position: absolute;
  height:32vmin;
  width:21vmin;
  bottom:0;
  left:112vmin;
  z-index:-30;
  background-color: var(--pink-light);  
}

.lastThing{
 clip-path: polygon(21% 9%, 32% 9%, 33% 22%, 100% 29%, 100% 100%, 57% 100%, 0 44%, 1% 21%, 0 0, 21% 0);
  top:54vmin;
  left:86vmin;
  height:20vmin;
  width:14vmin;
  position: absolute;
  background-color: white;
  z-index:30;
  
}

.lastThing2{
 clip-path: polygon(21% 9%, 32% 9%, 33% 22%, 100% 29%, 100% 100%, 57% 100%, 28% 41%, 1% 21%, 0 0, 21% 0);
  top:77vmin;
  left:86vmin;
    height:23vmin;
  width:12vmin;
  position: absolute;
  background-color: white;
}
.smallThing{
   position: absolute;
  height:18vmin;
  width:2vmin;
  bottom:0;
  left:63vmin;
  background-color: var(--pink-medium);
  clip-path: polygon(0 0, 100% 17%, 100% 100%, 0% 100%);
}


.line{
  clip-path: polygon(0 0, 100% 13%, 100% 100%, 0% 100%);
   position: absolute;
  height:30vmin;
  width:1vmin;
  bottom:0;
  left:115vmin;
  background-color: white;
}