CSS三角形如何工作？

Question

在CSS Tricks上有很多不同的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>它是如何以及为什么有效？

Answer 1

CSS三角形：五幕中的悲剧

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

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

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

......高度为0 ......

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

这导致了一个三角形。

Answer 2

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

jsFiddle。

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

Answer 3

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

.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;}

最后我们得到了这个：

Answer 4

而现在完全不同的东西......

不要使用css技巧，不要忘记像html实体一样简单的解决方案：

▲

结果：

▲

请参阅：上下三角形的HTML实体是什么？