CSS drawing graphics (continuously updated)

1. Triangles

2, trapezoidal

3. Trapezoid + triangle form pyramid

.pyramid .instance-1 {
  height: 0px;
  width: 0px;
  border-top: 0px solid transparent;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 70px solid #ffbc32;
}

.pyramid .instance-2 {
  width: 160px;
  height: 70px;
  border-top: 0px solid #2d85f0;
  border-bottom: 70px solid #0aa858;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
}

.pyramid .instance-3 {
  width: 240px;
  height: 70px;
  border-top: 0px solid #2d85f0;
  border-bottom: 70px solid #f4433c;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
}

.pyramid .instance-4 {
  width: 320px;
  height: 70px;
  border-top: 0px solid #2d85f0;
  border-bottom: 70px solid #2d85f0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
}

.pyramid > div {
  margin: 0 auto;
}
Copy the code