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&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;border-color:&nbsp;yellow&nbsp;blue&nbsp;red&nbsp;green; &nbsp;&nbsp;&nbsp;&nbsp;border-style:&nbsp;solid; &nbsp;&nbsp;&nbsp;&nbsp;border-width:&nbsp;200px&nbsp;200px&nbsp;200px&nbsp;200px; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;0px; &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;0px;}这给你这个：但是不需要顶部边框，所以将其宽度设置为0px。现在我们的边界底部200px将使我们的三角形高200px。.triangle&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;border-color:&nbsp;yellow&nbsp;blue&nbsp;red&nbsp;green; &nbsp;&nbsp;&nbsp;&nbsp;border-style:&nbsp;solid; &nbsp;&nbsp;&nbsp;&nbsp;border-width:&nbsp;0px&nbsp;200px&nbsp;200px&nbsp;200px; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;0px; &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;0px;}我们会得到这个：然后隐藏两个边三角形，将border-color设置为透明。由于顶部边框已被有效删除，我们也可以将border-top-color设置为透明。.triangle&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;border-color:&nbsp;transparent&nbsp;transparent&nbsp;red&nbsp;transparent; &nbsp;&nbsp;&nbsp;&nbsp;border-style:&nbsp;solid; &nbsp;&nbsp;&nbsp;&nbsp;border-width:&nbsp;0px&nbsp;200px&nbsp;200px&nbsp;200px; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;0px; &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;0px;}最后我们得到了这个：

Answer 4

而现在完全不同的东西......不要使用css技巧，不要忘记像html实体一样简单的解决方案：&#9650;结果：▲请参阅：上下三角形的HTML实体是什么？