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;
}
其他回答
不同的方法：带变换旋转的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）。你不需要任何响应性的东西，一个简单的三角形对你来说很好，那么你应该使用这里解释的边界技术：更好的浏览器兼容性和更容易理解，这要感谢这里的精彩文章。
不同的方法。具有线性梯度（对于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
这是一个老问题，但我认为值得分享如何使用这种三角形技术创建箭头。
步骤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/
CSS三角：五幕悲剧
正如亚历克斯所说，等宽的边界以45度角相互对接：
如果没有上边框，则如下所示：
然后你给它0的宽度。。。
…高度为0。。。
…最后，使两个侧边透明：
这就形成了一个三角形。
假设我们有以下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;
}
现在我把背景色改成了白色。图像已附加。
因此，我们得到了所需的三角形。
