一尘不染

CSS 三角形是如何工作的？

javascript

CSS Tricks - Shapes of CSS中有很多不同的 CSS 形状，我对三角形特别困惑：

CSS 三角形

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

阅读 148

2022-02-13

共1个答案

一尘不染

CSS 三角形：五幕中的悲剧

等宽的边界以 45 度角相互对接：

边界以 45 度角相交，内容在中间

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

没有上边框

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

没有宽度

…和0的高度…

也没有身高

…最后，您使两侧边框透明：

透明侧边框

这导致了一个三角形。

2022-02-13