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

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

现在完全不同了。。。

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

▲

结果：

▲

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

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

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

看看jsFiddle。

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

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

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

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