css - CSS 三 Angular 形是如何工作的？

Question

CSS Tricks - Shapes of CSS 中有大量不同的 CSS 形状我对三 Angular 形特别困惑:

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

<div id="triangle-up"></div>

它如何以及为何起作用？

Answer 1

CSS 三 Angular 形:五幕悲剧

作为alex said ，等宽的边界以 45 度 Angular 相互对接:

当你没有顶部边框时，它看起来像这样:

然后你给它一个宽度为0...

...高度为 0...

...最后，将两侧边框设为透明:

这导致了一个三 Angular 形。