利用只設定 Border 來取得三角形

border-color: 上 右 下 左; 
border-width: 上 右 下 左;

一個空的 (沒有 content) 元素
border 的四個方向設定不同顏色可以取得

.sample {
  display: inline-block;
  border-style: solid;
  border-color: red orange yellow green;
  border-width: 50px 50px 50px 50px;
}

只留一下一邊顏色，其他邊設定顏色為透明 (transparent) 就可以取得三角形了
以這個案例用 border-bottom-color 為主要的三角形
border-bottom-width = 三角形的高

.sample2 {
  display: inline-block;
  border-style: solid;
  border-color: transparent transparent orange transparent;
  border-width: 0 50px 100px 50px;
}

border-left-width + border-right-width = 三角形的底邊長

.sample3 {
  display: inline-block;
  border-style: solid;
  border-color: transparent transparent red transparent;
  border-width: 0 40px 100px 70px;
}

.sample4 {
  display: inline-block;
  border-style: solid;
  border-color: transparent transparent blue transparent;
  border-width: 0 20px 100px 20px;
}

因為沒有 content 才能夠取得三角形
所以只要設定 content 還可以獲得梯形

width = 上底邊長
border-bottom-width = 三角形的高
width + border-left-width + border-right-width = 下底邊長

.sample5 {
  display: inline-block;
  border-style: solid;
  border-color: transparent transparent purple transparent;
  border-width: 0 50px 100px 50px;
  width: 40px;
}

實作範例：幸運轉盤 (opens new window)

1. 轉盤中心的針
2. 轉盤的每一片區塊的三角形，透過角度跟高就可以計算獲得底邊長