CSS技巧-CSS的形状有很多不同的CSS形状，我特别困惑于三角形：
#三角形向上{宽度：0；高度：0；左边框：50px实心透明；右边框：50px实心透明；边框底部：100px纯红色；}<div id=“triangle up”></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);
}
游乐场页面
重要提示：如果三角形在某些浏览器中显示为像素化，请尝试此处描述的方法之一。
其他回答
其他人已经很好地解释了这一点。让我给你一个动画，它将快速解释这一点：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;
}
假设我们有以下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;
}
现在我把背景色改成了白色。图像已附加。
因此，我们得到了所需的三角形。
不同的方法：带变换旋转的CSS3三角形
使用这种技术很容易制作三角形。对于喜欢看动画来解释这项技术的人来说，这里是：
动画链接：如何制作CSS3三角形。和演示：使用变换旋转生成的CSS3三角形。
否则，这里将在4幕（这不是悲剧）中详细解释如何用一个元素制作等腰直角三角形。
注1：对于非等腰三角形和花哨的东西，您可以看到步骤4。注意2：在以下代码段中，不包括供应商前缀。它们包含在codepen演示中。注意3：以下解释的HTML始终是：<div class=“tr”></div>
步骤1：制作一个div
简单，只需确保宽度=1.41 x高度。您可以使用任何技术（参见此处），包括使用百分比和填充底部来保持纵横比并形成响应三角形。在下图中，div有一个金黄色的边框。
在那个div中，插入一个伪元素，并赋予它100%的父元素宽度和高度。伪元素在下图中具有蓝色背景。
此时，我们有了这个CSS：
.tr {
width: 30%;
padding-bottom: 21.27%; /* = width / 1.41 */
position: relative;
}
.tr: before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0079C6;
}
第2步：让我们旋转
首先，最重要的是：定义变换原点。默认原点位于伪元素的中心，我们需要它位于左下角。通过将此CSS添加到伪元素：
变换原点：0 100%；或变换原点：左下；
现在我们可以通过变换将伪元素顺时针旋转45度：旋转（45度）；
此时，我们有了这个CSS：
.tr {
width: 30%;
padding-bottom: 21.27%; /* = width / 1.41 */
position: relative;
}
.tr:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0079C6;
transform-origin: 0 100%;
transform: rotate(45deg);
}
第3步：隐藏它
要隐藏伪元素的不需要的部分（用黄色边框溢出div的所有部分），只需设置overflow：hidden；在容器上。去掉黄色边框后，你会。。。三角形！：
DEMO
CSS：
.tr {
width: 30%;
padding-bottom: 21.27%; /* = width / 1.41 */
position: relative;
overflow: hidden;
}
.tr:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #0079C6;
transform-origin: 0 100%;
transform: rotate(45deg);
}
第4步：更进一步。。。
如演示所示，您可以自定义三角形：
通过玩sketchX（）使它们变薄或变平。通过播放变换原点和旋转方向，使它们指向左、右或任何其他方向。使用3D变换属性进行一些反射。给出三角形边框在三角形内放置图像更多。。。释放CSS3的力量！
为什么要使用这种技术？
三角形很容易做出反应。你可以做一个带边框的三角形。可以保持三角形的边界。这意味着您只能在光标位于三角形内时触发悬停状态或单击事件。这在某些情况下会变得非常方便，比如每个三角形不能覆盖其邻居，因此每个三角形都有自己的悬停状态。你可以做出一些奇特的效果，比如反射。它将帮助您了解二维和三维变换财产。
为什么不使用此技术？
主要缺点是浏览器兼容性，IE9+支持2d转换财产，因此如果您计划支持IE8，则无法使用此技术。有关更多信息，请参阅CanIuse。对于一些使用3d变换的奇特效果，如反射浏览器支持IE10+（更多信息请参见canIuse）。你不需要任何响应性的东西，一个简单的三角形对你来说很好，那么你应该使用这里解释的边界技术：更好的浏览器兼容性和更容易理解，这要感谢这里的精彩文章。
如果你想改变边框大小、宽度和高度，看看它们如何创建不同的形状，请尝试以下操作：
常量大小=[32，32，32，32]；const triangle=document.getElementById（'triangle'）；函数更新（｛target｝）{让索引=空；if（目标）{index=parseInt（target.id）；if（！isNaN（索引））{sizes[index]=目标值；}}window.requestAnimationFrame（（）=>{triangle.style.borderWidth=sizes.map（size=>`${size}px`）.join（“”）；if（isNaN（索引））{triangle.style[target.id]=`${target.value}px`；}});}document.querySelectorAll（'input'）.forEach（input=>{input.oninput=更新；});更新（｛｝）；正文{边距：0；最小高度：100vh；显示：柔性；对齐内容：中心；对齐项目：居中；溢出：隐藏；}#三角形{边框样式：实心；边框颜色：黄-品红-蓝-黑；背景：青色；高度：0px；宽度：0px；}#控件{位置：固定；底部：0；左：0；右：0；背景：白色；显示：柔性；方框阴影：0 0 32px rgba（0，0，0、.125）；}#控件>div{位置：相对；宽度：25%；填充：8px；框大小调整：边框框；显示：柔性；}输入{边距：0；宽度：100%；位置：相对；}<div id=“triangle”style=“border width:32px 32px 32px；”></div><div id=“controls”><div><input-type=“range”min=“0”max=“128”value=“32”id=“0”/></div><div><input-type=“range”min=“0”max=“128”value=“32”id=“1”/></div><div><input-type=“range”min=“0”max=“128”value=“32”id=“2”/></div><div><input-type=“range”min=“0”max=“128”value=“32”id=“3”/></div><div><input-type=“range”min=“0”max=“128”value=“0“id=“width”/></div><div><input-type=“range”min=“0”max=“128”value=“0“id=“height”/></div></div>
我知道这是一个旧的方法，但我想在讨论中补充一点，单独使用HTML和CSS创建三角形至少有5种不同的方法。
使用边框使用线性梯度使用圆锥梯度使用转换和溢出使用剪辑路径
我认为，除了方法3（使用圆锥曲线梯度）之外，这里已经介绍了所有内容，所以我将在这里分享：
.三角形{宽度：40px；高度：40px；背景：圆锥形梯度（50%50%，透明135度，绿色0，绿色225度，透明0）；}<div class=“triangle”></div>
