Snippet - 三角形 Triangle

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

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

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

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

.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 green;
}

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

參考資料

CSS Triangle