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

CSS Triangle

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

它是如何以及为什么有效？

CSS 三角形：五幕中的悲剧

正如亚历克斯所说，相等宽度的边界以 45 度角相互对接：

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

如果没有顶部边框，它看起来像这样：

没有顶部边界

那你给它宽度为 0 ......

没有宽度

... 和 0 的高度......

没有高度

...... 最后，你让两个边框透明：

透明边框

这导致了一个三角形。

边框使用相交的倾斜边缘（45° 角，宽度相等的边框，但更改边框宽度可能会使角度倾斜）。

边界的例子

jsFiddle 。

通过隐藏某些边框，您可以获得三角效果（如上所示，通过使不同部分的颜色不同）。 transparent通常用作边缘颜色以实现三角形。

从基本方块和边框开始。每个边框都会有不同的颜色，所以我们可以区分它们：

.triangle {
    border-color: yellow blue red green;
    border-style: solid;
    border-width: 200px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

这给你这个：

但是不需要顶部边框，因此将其宽度设置为0px 。现在我们200px边界底部将使我们的三角形高 200px。

.triangle {
    border-color: yellow blue red green;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

我们会得到这个：

然后隐藏两个边三角形，将 border-color 设置为透明。由于顶部边框已被有效删除，我们也可以将 border-top-color 设置为透明。

.triangle {
    border-color: transparent transparent red transparent;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

最后我们得到了这个：

协慌网

CSS 三角形如何工作？

答案

CSS 三角形：五幕中的悲剧