CSS技巧-CSS的形状有很多不同的CSS形状，我特别困惑于三角形：
#三角形向上{宽度：0；高度：0；左边框：50px实心透明；右边框：50px实心透明；边框底部：100px纯红色；}<div id=“triangle up”></div>
它是如何以及为什么工作的？
当前回答
考虑下面的三角形
.triangle {
border-bottom:15px solid #000;
border-left:10px solid transparent;
border-right:10px solid transparent;
width:0;
height:0;
}
这是我们得到的：
为什么会变成这样？下图解释了尺寸，注意底部边框使用了15px，左侧和右侧使用了10px。
通过删除右边框，可以很容易地创建直角三角形。
其他回答
好的，这个三角形将被创建，因为元素的边框在HTML和CSS中一起工作的方式。。。
由于我们通常使用1或2px边框，我们从未注意到边框以相同的宽度彼此成45°角，如果宽度发生变化，角度也会发生变化，请运行我在下面创建的CSS代码：
.三角形{宽度：100px；高度：100px；左边框：50px实心黑色；右边框：50px实心黑色；边框底部：100px纯红色；}<div class=“triangle”></div>
然后在下一步中，我们没有任何宽度或高度，如下所示：
.三角形{宽度：0；高度：0；左边框：50px实心黑色；右边框：50px实心黑色；边框底部：100px纯红色；}<div class=“triangle”></div>
现在，我们使左边界和右边界不可见，以使理想的三角形如下所示：
.三角形{宽度：0；高度：0；左边框：50px实心透明；右边框：50px实心透明；边框底部：100px纯红色；}<div class=“triangle”></div>
如果您不愿意运行代码片段来查看步骤，我创建了一个图像序列，以查看一个图像中的所有步骤：
边框在相交处使用有角度的边（与等宽边框成45°角，但更改边框宽度可能会扭曲角度）。
第二部分{宽度：60px；边框宽度：30px；边框颜色：红蓝绿黄；边框样式：实心；}<div></div>
看看jsFiddle。
通过隐藏某些边界，您可以获得三角形效果（正如您在上面看到的，通过使不同部分的颜色不同）。透明经常被用作边缘颜色以获得三角形形状。
考虑下面的三角形
.triangle {
border-bottom:15px solid #000;
border-left:10px solid transparent;
border-right:10px solid transparent;
width:0;
height:0;
}
这是我们得到的：
为什么会变成这样？下图解释了尺寸，注意底部边框使用了15px，左侧和右侧使用了10px。
通过删除右边框，可以很容易地创建直角三角形。
在阅读了这里的其他答案后，我发现对于CSS三角形的工作方式有很多很好的解释。我认为这是一种技巧，而不是一种可以通用的技巧。
为了便于阅读和维护，我建议您在SVG中定义几何图形。
然后，可以通过添加data:image/SVG+xml，前缀，使用data-uri转换SVG。作为一个数据uri，它现在可以用作CSS中的背景图像。因为SVG是纯文本的，所以您可以很容易地对几何图形、笔划和填充颜色进行更新。
第三节{宽度：100px；高度：100px；显示：内联块；背景图像：url（'data:image/svg+xml，<svg xmlns=“http://www.w3.org/2000/svg“viewBox=”0 0 32 32“><path fill=”red“d=”M31.345 29H1.655L16.5 1.96z“/></svg>'）；}＜div＞<div class=“tri”></div><div class=“tri”></div><div class=“tri”></div></div>
现在完全不同了。。。
不要忘记像html实体这样简单的解决方案，而不要使用css技巧：
▲
结果：
▲
请参见：上下三角形的HTML实体是什么？
