[Snippet-CSS] 三角形 Triangle

// 注意：$npm、$green、$heroku 為自定義的顏色變數，使用時請替換為實際的顏色值，例如：
// $npm: #cb3837;
// $green: #3c7a3d;
// $heroku: #6762a6;

.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.