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

.三角形{边框颜色：黄-蓝-红-绿；边框样式：实心；边框宽度：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>

最后我们得到了：

使用剪辑路径：多边形（50%0%，100%100%，0%100%）；用于创建简单的三角形

<div class="triangle"></div>

.triangle{width:200px; height:200px;background:#000;clip-path: polygon(50% 0%, 100% 100%, 0% 100%);}

CSS剪辑路径

这是我觉得这个问题错过了的；剪辑路径

简单地剪辑路径具有剪切路径属性的剪切类似于从矩形纸张上剪切形状（如圆形或五边形）。该属性属于“CSS屏蔽模块级别1”规范。规范指出，“CSS屏蔽提供了两种方法来部分或完全隐藏视觉元素的部分：屏蔽和剪切”。粉碎杂志摘录

剪辑路径将使用元素本身而不是其边界来剪切您在其参数中指定的形状。它使用了一个超简单的基于百分比的坐标系统，这使得编辑非常容易，意味着你可以在几分钟内拿起它并创建奇怪而奇妙的形状。

三角形形状示例

第二部分{-webkit剪辑路径：多边形（50%0%，0%100%，100%100%）；剪辑路径：多边形（50%0%、0%100%、100%100%）；背景：红色；宽度：100px；高度：100px；}<div></div>

缺点

目前它确实有一个主要的缺点，一个是它主要缺乏支持，只在-webkit浏览器中得到了真正的覆盖，在IE上没有支持，在FireFox中只有很部分。

资源

这里有一些有用的资源和材料，可以帮助您更好地了解剪辑路径，并开始创建自己的剪辑路径。

Clippy-剪辑路径生成器W3C候选推荐文件MDN剪辑路径文档剪辑路径浏览器支持

CSS三角：五幕悲剧

正如亚历克斯所说，等宽的边界以45度角相互对接：

如果没有上边框，则如下所示：

然后你给它0的宽度。。。

…高度为0。。。

…最后，使两个侧边透明：

这就形成了一个三角形。

不同的方法。具有线性梯度（对于IE，仅IE 10+）。您可以使用任何角度：

.三角形{边距：50px自动；宽度：100px；高度：100px；/*线性梯度*/背景：-moz线性梯度（-45deg，rgba（255,0,0,0）0%，rgba，255,0,0，50%，rgba）255,0,0,1，50%；/*FF3.6以上*/背景：-webkit渐变（线性、左上、右下、颜色停止（0%，rgba（255,0,0,0））、颜色停止器（50%，rgba）255,0,0，0））、色彩停止器（50%，rgba；/*铬，Safari4+*/背景：-webkit线性梯度（-45deg，rgba（255,0,0）0%，rgba，255,0,0,0，50%，rgba）255,0,0,1，50%；/*Chrome10+、Safari5.1+*/背景：o-linear-gradient（-45度，rgba（255,0,0）0%，rgba（2550,0,0）50%，rgba（255,00,1）50%；/*歌剧11.10+*/背景：-ms线性梯度（-45度，rgba（255,0,0）0%，rgba，255,0,0,0，50%，rgba）255,0,0,1，50%；/*即10+*/背景：线性梯度（135度，rgba（255,0,0）0%，rgba，255,0,0,0，50%，rgba）255,0,0,1，50%；/*W3C*/；}<div class=“triangle”></div>

这是jsfiddle

好的，这个三角形将被创建，因为元素的边框在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>

如果您不愿意运行代码片段来查看步骤，我创建了一个图像序列，以查看一个图像中的所有步骤：