三角形(triangle)的css画法

.top {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 40px solid skyblue;
}
.left {
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-right: 80px solid skyblue;
}

.right {
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 80px solid skyblue;
}

.bottom {
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-top: 80px solid skyblue;
}

.topLeft {
  width: 0;
  height: 0;
  border-top: 80px solid skyblue;
  border-right: 80px solid transparent;
}

.topRight {
  width: 0;
  height: 0;
  border-top: 80px solid skyblue;
  border-left: 80px solid transparent;
}

.bottomLeft {
  width: 0;
  height: 0;
  border-bottom: 80px solid skyblue;
  border-right: 80px solid transparent;
}

.bottomRight {
  width: 0;
  height: 0;
  border-bottom: 80px solid skyblue;
  border-left: 80px solid transparent;
}