剪辑路径对我来说效果最好-适用于具有和不具有固定尺寸的div/容器：

.triangleContainer{
    position: relative;
    width: 500px;
    height: 500px;
}

.triangleContainer::before{
    content: "";        
    position: absolute;
    background:blue;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

如果你想改变边框大小、宽度和高度，看看它们如何创建不同的形状，请尝试以下操作：

常量大小=[32，32，32，32]；const triangle=document.getElementById（'triangle'）；函数更新（｛target｝）{让索引=空；if（目标）{index=parseInt（target.id）；if（！isNaN（索引））{sizes[index]=目标值；}}window.requestAnimationFrame（（）=>{triangle.style.borderWidth=sizes.map（size=>`${size}px`）.join（“”）；if（isNaN（索引））{triangle.style[target.id]=`${target.value}px`；}});}document.querySelectorAll（'input'）.forEach（input=>{input.oninput=更新；});更新（｛｝）；正文{边距：0；最小高度：100vh；显示：柔性；对齐内容：中心；对齐项目：居中；溢出：隐藏；}#三角形{边框样式：实心；边框颜色：黄-品红-蓝-黑；背景：青色；高度：0px；宽度：0px；}#控件{位置：固定；底部：0；左：0；右：0；背景：白色；显示：柔性；方框阴影：0 0 32px rgba（0，0，0、.125）；}#控件>div{位置：相对；宽度：25%；填充：8px；框大小调整：边框框；显示：柔性；}输入{边距：0；宽度：100%；位置：相对；}<div id=“triangle”style=“border width:32px 32px 32px；”></div><div id=“controls”><div><input-type=“range”min=“0”max=“128”value=“32”id=“0”/></div><div><input-type=“range”min=“0”max=“128”value=“32”id=“1”/></div><div><input-type=“range”min=“0”max=“128”value=“32”id=“2”/></div><div><input-type=“range”min=“0”max=“128”value=“32”id=“3”/></div><div><input-type=“range”min=“0”max=“128”value=“0“id=“width”/></div><div><input-type=“range”min=“0”max=“128”value=“0“id=“height”/></div></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/

不同的方法：带变换旋转的CSS3三角形

使用这种技术很容易制作三角形。对于喜欢看动画来解释这项技术的人来说，这里是：

动画链接：如何制作CSS3三角形。和演示：使用变换旋转生成的CSS3三角形。

否则，这里将在4幕（这不是悲剧）中详细解释如何用一个元素制作等腰直角三角形。

注1：对于非等腰三角形和花哨的东西，您可以看到步骤4。注意2：在以下代码段中，不包括供应商前缀。它们包含在codepen演示中。注意3：以下解释的HTML始终是：<div class=“tr”></div>

---

步骤1：制作一个div

简单，只需确保宽度=1.41 x高度。您可以使用任何技术（参见此处），包括使用百分比和填充底部来保持纵横比并形成响应三角形。在下图中，div有一个金黄色的边框。

在那个div中，插入一个伪元素，并赋予它100%的父元素宽度和高度。伪元素在下图中具有蓝色背景。

此时，我们有了这个CSS：

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
}

.tr: before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0079C6;
}

第2步：让我们旋转

首先，最重要的是：定义变换原点。默认原点位于伪元素的中心，我们需要它位于左下角。通过将此CSS添加到伪元素：

变换原点：0 100%；或变换原点：左下；

现在我们可以通过变换将伪元素顺时针旋转45度：旋转（45度）；

此时，我们有了这个CSS：

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
}

.tr:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0079C6;
    transform-origin: 0 100%;        
    transform: rotate(45deg);
}

第3步：隐藏它

要隐藏伪元素的不需要的部分（用黄色边框溢出div的所有部分），只需设置overflow：hidden；在容器上。去掉黄色边框后，你会。。。三角形！：

DEMO

CSS：

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
    overflow: hidden;
}

.tr:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0079C6;
    transform-origin: 0 100%;
    transform: rotate(45deg);
}

第4步：更进一步。。。

如演示所示，您可以自定义三角形：

通过玩sketchX（）使它们变薄或变平。通过播放变换原点和旋转方向，使它们指向左、右或任何其他方向。使用3D变换属性进行一些反射。给出三角形边框在三角形内放置图像更多。。。释放CSS3的力量！

---

为什么要使用这种技术？

三角形很容易做出反应。你可以做一个带边框的三角形。可以保持三角形的边界。这意味着您只能在光标位于三角形内时触发悬停状态或单击事件。这在某些情况下会变得非常方便，比如每个三角形不能覆盖其邻居，因此每个三角形都有自己的悬停状态。你可以做出一些奇特的效果，比如反射。它将帮助您了解二维和三维变换财产。

为什么不使用此技术？

主要缺点是浏览器兼容性，IE9+支持2d转换财产，因此如果您计划支持IE8，则无法使用此技术。有关更多信息，请参阅CanIuse。对于一些使用3d变换的奇特效果，如反射浏览器支持IE10+（更多信息请参见canIuse）。你不需要任何响应性的东西，一个简单的三角形对你来说很好，那么你应该使用这里解释的边界技术：更好的浏览器兼容性和更容易理解，这要感谢这里的精彩文章。

剪辑路径对我来说效果最好-适用于具有和不具有固定尺寸的div/容器：

.triangleContainer{
    position: relative;
    width: 500px;
    height: 500px;
}

.triangleContainer::before{
    content: "";        
    position: absolute;
    background:blue;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

这是一个老问题，但我认为值得分享如何使用这种三角形技术创建箭头。

步骤1：

让我们创建两个三角形，对于第二个，我们将使用：after伪类，并将其放置在另一个的正下方：

.箭头{宽度：0；高度：0；边框半径：50px；显示：内联块；位置：相对；}.arrow：在之后{内容：“”；宽度：0；高度：0；位置：绝对；}.向上箭头{左边框：50px实心透明；右边框：50px实心透明；边框底部：50px实心#333；}.向上箭头：之后{顶部：5px；左边框：50px实心透明；右边框：50px实心透明；边框底部：50px实心#ccc；右：-50px；}<div class=“arrow arrow up”></div>

步骤2

现在，我们只需将第二个三角形的主要边界颜色设置为与背景相同的颜色：

.箭头{宽度：0；高度：0；边框半径：50px；显示：内联块；位置：相对；}.arrow：在之后{内容：“”；宽度：0；高度：0；位置：绝对；}.向上箭头{左边框：50px实心透明；右边框：50px实心透明；边框底部：50px实心#333；}.向上箭头：之后{顶部：5px；左边框：50px实心透明；右边框：50px实心透明；边框底部：50px实心#fff；右：-50px；}<div class=“arrow arrow up”></div>

摆弄所有箭头：http://jsfiddle.net/tomsarduy/r0zksgeu/