CSS技巧-CSS的形状有很多不同的CSS形状，我特别困惑于三角形：
#三角形向上{宽度：0；高度：0；左边框：50px实心透明；右边框：50px实心透明；边框底部：100px纯红色；}<div id=“triangle up”></div>
它是如何以及为什么工作的？
当前回答
其他人已经很好地解释了这一点。让我给你一个动画，它将快速解释这一点：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;
}
其他回答
不同的方法。具有线性梯度（对于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
假设我们有以下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;
}
现在我把背景色改成了白色。图像已附加。
因此，我们得到了所需的三角形。
在阅读了这里的其他答案后，我发现对于CSS三角形的工作方式有很多很好的解释。我认为这是一种技巧，而不是一种可以通用的技巧。
为了便于阅读和维护，我建议您在SVG中定义几何图形。
然后，可以通过添加data:image/SVG+xml，前缀，使用data-uri转换SVG。作为一个数据uri，它现在可以用作CSS中的背景图像。因为SVG是纯文本的，所以您可以很容易地对几何图形、笔划和填充颜色进行更新。
第三节{宽度：100px；高度：100px；显示：内联块；背景图像：url（'data:image/svg+xml，<svg xmlns=“http://www.w3.org/2000/svg“viewBox=”0 0 32 32“><path fill=”red“d=”M31.345 29H1.655L16.5 1.96z“/></svg>'）；}＜div＞<div class=“tri”></div><div class=“tri”></div><div class=“tri”></div></div>
如果你想改变边框大小、宽度和高度，看看它们如何创建不同的形状，请尝试以下操作：
常量大小=[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>
试试看：-
.三角形{边框颜色：透明透明红色透明；边框样式：实心；边框宽度：0px 200px 200px；高度：0px；宽度：0px；}<div class=“triangle”></div>
