从基本的正方形和边框开始。每个边框将被赋予不同的颜色，以便我们可以区分它们：

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

这为您提供了：

但不需要顶部边框，因此将其宽度设置为0px。现在，200px的边框底部将使我们的三角形变高200px。

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

我们将得到：

然后，要隐藏两个边三角形，请将边框颜色设置为透明。由于顶部边框已被有效删除，因此我们也可以将边框顶部颜色设置为透明。

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

最后我们得到了：

更进一步，使用基于此的css，我在上一个按钮和下一个按钮上添加了箭头（是的，我知道它不是100%跨浏览器，但仍然很流畅）。

.三角形{宽度：0；高度：0；左边框：50px实心透明；右边框：50px实心透明；边框底部：100px纯红色；边距：20px自动；}.向下三角形{边框底部：无；边框顶部：100px纯红色；}.左三角形{左侧边框：无；右边框：100px纯红色；边框底部：50px实心透明；边框顶部：50px实心透明；}.直角三角形{边界权：无；左边框：100px纯红色；边框底部：50px实心透明；边框顶部：50px实心透明；}.三角形后：后{宽度：0；高度：0；左侧边框：5px实心透明；右边框：5px实心透明；边框底部：5px纯红色；边距：0 5px；内容：“”；显示：内联块；}.右后三角：后{边界权：无；左侧边框：5px纯蓝色；边框底部：5px实心透明；边框顶部：5px实心透明；}前三角形：前{宽度：0；高度：0；左侧边框：5px实心透明；右边框：5px实心透明；边框底部：5px纯蓝色；边距：0 5px；内容：“”；显示：内联块；}.左前三角：前{左侧边框：无；右边框：5px纯蓝色；边框底部：5px实心透明；边框顶部：5px实心透明；}<div class=“triangle”></div><div class=“triangle triangle down”></div><div class=“triangle triangle left”></div><div class=“triangle triangle right”></div><a class=“triangle before triangle after left”href=“#”>返回</a><a class=“triangle after triangle”href=“#”>下一步</a>

在阅读了这里的其他答案后，我发现对于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>

考虑下面的三角形

.triangle {
    border-bottom:15px solid #000;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    width:0;
    height:0;
}

这是我们得到的：

为什么会变成这样？下图解释了尺寸，注意底部边框使用了15px，左侧和右侧使用了10px。

通过删除右边框，可以很容易地创建直角三角形。

不同的方法：带变换旋转的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）。你不需要任何响应性的东西，一个简单的三角形对你来说很好，那么你应该使用这里解释的边界技术：更好的浏览器兼容性和更容易理解，这要感谢这里的精彩文章。

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

步骤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/