剪辑路径对我来说效果最好-适用于具有和不具有固定尺寸的div/容器：

.triangleContainer{
    position: relative;
    width: 500px;
    height: 500px;
}

.triangleContainer::before{
    content: "";        
    position: absolute;
    background:blue;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

这里是我为演示而创建的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>

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

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

看看jsFiddle。

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

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

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

这是另一把小提琴：

.container:after {
    position: absolute;
    right: 0;
    content: "";
    margin-right:-50px;
    margin-bottom: -8px;
    border-width: 25px;
    border-style: solid;
    border-color: transparent transparent transparent #000;
    width: 0;
    height: 0;
    z-index: 10;
    -webkit-transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out;
    transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out;
    bottom: 21px;
}
.container {
    float: left;
    margin-top: 100px;
    position: relative;
    width: 150px;
    height: 80px;
    background-color: #000;
}

.containerRed {
    float: left;
    margin-top: 100px;
    position: relative;
    width: 100px;
    height: 80px;
    background-color: red;
}

https://jsfiddle.net/qdhvdb17/

试试看：-

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