试试看：-

.三角形{边框颜色：透明透明红色透明；边框样式：实心；边框宽度：0px 200px 200px；高度：0px；宽度：0px；}<div class=“triangle”></div>

这是另一把小提琴：

.container:after {
    position: absolute;
    right: 0;
    content: "";
    margin-right:-50px;
    margin-bottom: -8px;
    border-width: 25px;
    border-style: solid;
    border-color: transparent transparent transparent #000;
    width: 0;
    height: 0;
    z-index: 10;
    -webkit-transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out;
    transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out;
    bottom: 21px;
}
.container {
    float: left;
    margin-top: 100px;
    position: relative;
    width: 150px;
    height: 80px;
    background-color: #000;
}

.containerRed {
    float: left;
    margin-top: 100px;
    position: relative;
    width: 100px;
    height: 80px;
    background-color: red;
}

https://jsfiddle.net/qdhvdb17/

考虑下面的三角形

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

边框在相交处使用有角度的边（与等宽边框成45°角，但更改边框宽度可能会扭曲角度）。

第二部分{宽度：60px；边框宽度：30px；边框颜色：红蓝绿黄；边框样式：实心；}<div></div>

看看jsFiddle。

通过隐藏某些边界，您可以获得三角形效果（正如您在上面看到的，通过使不同部分的颜色不同）。透明经常被用作边缘颜色以获得三角形形状。

我知道这是一个旧的方法，但我想在讨论中补充一点，单独使用HTML和CSS创建三角形至少有5种不同的方法。

使用边框使用线性梯度使用圆锥梯度使用转换和溢出使用剪辑路径

我认为，除了方法3（使用圆锥曲线梯度）之外，这里已经介绍了所有内容，所以我将在这里分享：

.三角形{宽度：40px；高度：40px；背景：圆锥形梯度（50%50%，透明135度，绿色0，绿色225度，透明0）；}<div class=“triangle”></div>