[Snippet-CSS] 三角形 Triangle

.triangle-left {
  width: 0px;
  height: 0px;
  border-right: 60px solid $npm; // 高
  border-top: 30px solid transparent; // 底
  border-bottom: 30px solid transparent; // 底
}

.triangle-top {
  width: 0px;
  height: 0px;
  border-right: 30px solid transparent; // 底
  border-left: 30px solid transparent; // 底
  border-bottom: 60px solid $green; // 高
}

.triangle-bottom {
  width: 0px;
  height: 0px;
  border-right: 30px solid transparent; // 底
  border-left: 30px solid transparent; // 底
  border-top: 60px solid $heroku; // 高
}

.triangle-lefttop {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid $npm;
}

.triangle-righttop {
  width: 0px;
  height: 0px;
  border-left: 60px solid transparent;
  border-top: 60px solid $green;
}

.triangle-leftbottom {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-bottom: 60px solid $npm;
}

.triangle-rightbottom {
  width: 0px;
  height: 0px;
  border-left: 60px solid transparent;
  border-bottom: 60px solid $green;
}

程式範例

See the Pen [CSS] Triangle by PJCHEN (@PJCHENder) on CodePen.