css實現三角形是個非常有意思的事情。

先看看如果 width height都為0，邊框不為零的時候，瀏覽器是如何渲染的？ 莫非是中間留出空位？當然并不是，它會自動把邊框變成三角形

  width: 0;
  height: 0;
  border-width: 30px;
  border-style: solid;
  border-color: yellow red green blue;

Paste_Image.png

所以，如果我們想要三角形的話，只需要 只設置邊框，讓某些邊框變成透明即可

把三個邊框都設置為透明

#triangle-up {
  width: 0;
  height: 0;
  border-width: 30px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

Paste_Image.png

上面可以看到，三角形的形狀就出來了。其他方向其實也同理

左下的效果

#triangle-left-down {
  width: 0;
  height: 0;
  border-width: 30px;
  border-style: solid;
  border-color: transparent transparent red red;
}

Paste_Image.png