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

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

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

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

考虑下面的三角形

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

这是我们得到的：

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

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

假设我们有以下div：

<div id="triangle" />

现在逐步编辑CSS，这样您就可以清楚地了解周围发生了什么

步骤1：JSfiddle链接：

 #triangle {
        background: purple;
        width :150px;
        height:150PX;
        border-left: 50px solid black ;
        border-right: 50px solid black;
        border-bottom: 50px solid black;
        border-top: 50px solid black;
    }

这是一个简单的div，带有非常简单的CSS。所以外行人可以理解。Div的尺寸为150 x 150像素，边框为50像素。图像附于：

步骤2:JSfiddle链接：

#triangle {
    background: purple;
    width :150px;
    height:150PX;
    border-left: 50px solid yellow ;
    border-right: 50px solid green;
    border-bottom: 50px solid red;
    border-top: 50px solid blue;
}

现在我刚刚更改了所有4个边的边框颜色。图像已附加。

步骤：3 JSfiddle链接：

#triangle {
    background: purple;
    width :0;
    height:0;
    border-left: 50px solid yellow ;
    border-right: 50px solid green;
    border-bottom: 50px solid red;
    border-top: 50px solid blue;
}

现在我刚刚将div的高度和宽度从150像素更改为零。图像已附加

第4步：JSfiddle：

#triangle {
    background: purple;
    width :0px;
    height:0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
    border-top: 50px solid transparent;
}

现在，我已经使所有边界都透明，除了底部边界。图像附在下面。

第5步：JSfiddle链接：

#triangle {
    background: white;
    width :0px;
    height:0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
    border-top: 50px solid transparent;
}

现在我把背景色改成了白色。图像已附加。

因此，我们得到了所需的三角形。