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

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

看看jsFiddle。

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

现在完全不同了。。。

不要忘记像html实体这样简单的解决方案，而不要使用css技巧：

▲

结果：

▲

请参见：上下三角形的HTML实体是什么？

不同的方法。具有线性梯度（对于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

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剪辑路径文档剪辑路径浏览器支持

这里是我为演示而创建的JSFiddle动画。

另请参见下面的代码段。

这是一个由Screencast制作的动画GIF

变换=[｛'border-left-width'：'30'，'margin-left'：'70'｝，{'婴儿-婴儿宽度'：'80'}，｛'右-右宽度‘：‘30’｝，｛“订单到页面宽度”：“0”，“页边空白”：“70”｝，｛'宽度'：“0”｝，｛“高度”：“0”，“页边空白”：“120”｝，｛'orderLeftColor'：'transparent'｝，｛'OrderRightColor'：'透明'｝];$（'#a'）.click（function（）｛$（'.border'）.ctrigger（“click”）；｝）；（函数（$）{var持续时间=1000$（'.border'）.click（function）{对于（var i=0；i<transforms.length；i++）{$（这个）.animate（变换[i]，持续时间）}}).end（）}（jQuery））.边框{边距：20px 50px；宽度：50px；高度：50px；边框宽度：50px；边框样式：实心；边框顶部颜色：绿色；边框右侧颜色：黄色；边框底部颜色：红色；边框左侧颜色：蓝色；光标：指针}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js“></script><script src=“https://code.jquery.com/color/jquery.color-2.1.2.min.js“></script>单击它<br><div class=“border”></div>

随机版本

/***将数组元素顺序随机化。*使用Durstenfeld洗牌算法。*/函数shuffleArray（数组）{对于（var i=array.length-1；i>0；i-）{var j=数学地板（数学随机（）*（i+1））；var temp=数组[i]；array[i]=array[j]；array[j]=温度；}返回数组；}变换=[｛'border-left-width'：'30'，'margin-left'：'70'｝，{'婴儿-婴儿宽度'：'80'}，｛'右-右宽度‘：‘30’｝，｛“订单到页面宽度”：“0”，“页边空白”：“70”｝，｛'宽度'：“0”｝，｛“高度”：“0”｝，｛'orderLeftColor'：'transparent'｝，｛'OrderRightColor'：'透明'｝];transforms=shuffleArray（变换）$（'#a'）.click（function（）｛$（'.border'）.ctrigger（“click”）；｝）；（函数（$）{var持续时间=1000$（'.border'）.click（function）{对于（var i=0；i<transforms.length；i++）{$（这个）.animate（变换[i]，持续时间）}}).end（）}（jQuery））.边框{边距：50px；宽度：50px；高度：50px；边框宽度：50px；边框样式：实心；边框顶部颜色：绿色；边框右侧颜色：黄色；边框底部颜色：红色；边框左侧颜色：蓝色；光标：指针}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js“></script><script src=“https://code.jquery.com/color/jquery.color-2.1.2.min.js“></script>单击它<br><div class=“border”></div>

一次性版本

$（'#a'）.click（function（）｛$（'.border'）.ctrigger（“click”）；｝）；（函数（$）{var持续时间=1000$（'.border'）.click（function）{$（这个）.animate（｛'顺序到宽度'：0，'边框左宽度'：30，'右边框宽度'：30，'边框底部宽度'：80，'width'：0，“高度”：0，'左边距'：100，'页边空白'：150，'borderTopColor'：'透明'，'borderRightColor'：'透明'，“borderLeftColor”：“transparent”｝，持续时间）}).end（）}（jQuery））.边框{边距：50px；宽度：50px；高度：50px；边框宽度：50px；边框样式：实心；边框顶部颜色：绿色；边框右侧颜色：黄色；边框底部颜色：红色；边框左侧颜色：蓝色；光标：指针}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js“></script><script src=“https://code.jquery.com/color/jquery.color-2.1.2.min.js“></script>单击它<br><div class=“border”></div>

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

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