CSS技巧-CSS的形状有很多不同的CSS形状，我特别困惑于三角形：
#三角形向上{宽度：0；高度：0；左边框：50px实心透明；右边框：50px实心透明；边框底部：100px纯红色；}<div id=“triangle up”></div>
它是如何以及为什么工作的？
当前回答
这里是我为演示而创建的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技巧：
▲
结果：
▲
请参见：上下三角形的HTML实体是什么？
其他人已经很好地解释了这一点。让我给你一个动画，它将快速解释这一点：http://codepen.io/chriscoyier/pen/lotjh
这里有一些代码供您使用和学习这些概念。
HTML格式：
<html>
<body>
<div id="border-demo">
</div>
</body>
</html>
CSS:
/*border-width is border thickness*/
#border-demo {
background: gray;
border-color: yellow blue red green;/*top right bottom left*/
border-style: solid;
border-width: 25px 25px 25px 25px;/*top right bottom left*/
height: 50px;
width: 50px;
}
玩这个，看看会发生什么。将高度和宽度设置为零。然后移除顶部边框并使左右透明，或者只需查看下面的代码以创建css三角形：
#border-demo {
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
}
边框在相交处使用有角度的边（与等宽边框成45°角，但更改边框宽度可能会扭曲角度）。
第二部分{宽度：60px；边框宽度：30px；边框颜色：红蓝绿黄；边框样式：实心；}<div></div>
看看jsFiddle。
通过隐藏某些边界，您可以获得三角形效果（正如您在上面看到的，通过使不同部分的颜色不同）。透明经常被用作边缘颜色以获得三角形形状。
我知道这是一个旧的方法，但我想在讨论中补充一点，单独使用HTML和CSS创建三角形至少有5种不同的方法。
使用边框使用线性梯度使用圆锥梯度使用转换和溢出使用剪辑路径
我认为，除了方法3（使用圆锥曲线梯度）之外，这里已经介绍了所有内容，所以我将在这里分享：
.三角形{宽度：40px；高度：40px；背景：圆锥形梯度（50%50%，透明135度，绿色0，绿色225度，透明0）；}<div class=“triangle”></div>
SASS（SCSS）三角形混合
我写这篇文章是为了让自动生成CSS三角形变得更容易（也更干燥）：
// Triangle helper mixin (by Yair Even-Or)
// @param {Direction} $direction - either `top`, `right`, `bottom` or `left`
// @param {Color} $color [currentcolor] - Triangle color
// @param {Length} $size [1em] - Triangle size
@mixin triangle($direction, $color: currentcolor, $size: 1em) {
$size: $size/2;
$transparent: rgba($color, 0);
$opposite: (top:bottom, right:left, left:right, bottom:top);
content: '';
display: inline-block;
width: 0;
height: 0;
border: $size solid $transparent;
border-#{map-get($opposite, $direction)}-color: $color;
margin-#{$direction}: -$size;
}
用例示例：
span {
@include triangle(bottom, red, 10px);
}
游乐场页面
重要提示：如果三角形在某些浏览器中显示为像素化，请尝试此处描述的方法之一。
