CSS技巧-CSS的形状有很多不同的CSS形状，我特别困惑于三角形：
#三角形向上{宽度：0；高度：0；左边框：50px实心透明；右边框：50px实心透明；边框底部：100px纯红色；}<div id=“triangle up”></div>
它是如何以及为什么工作的？
当前回答
假设我们有以下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;
}
现在我把背景色改成了白色。图像已附加。
因此，我们得到了所需的三角形。
其他回答
边框在相交处使用有角度的边（与等宽边框成45°角，但更改边框宽度可能会扭曲角度）。
第二部分{宽度：60px；边框宽度：30px；边框颜色：红蓝绿黄；边框样式：实心；}<div></div>
看看jsFiddle。
通过隐藏某些边界，您可以获得三角形效果（正如您在上面看到的，通过使不同部分的颜色不同）。透明经常被用作边缘颜色以获得三角形形状。
不同的方法。具有线性梯度（对于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
好的，这个三角形将被创建，因为元素的边框在HTML和CSS中一起工作的方式。。。
由于我们通常使用1或2px边框，我们从未注意到边框以相同的宽度彼此成45°角，如果宽度发生变化，角度也会发生变化，请运行我在下面创建的CSS代码：
.三角形{宽度：100px；高度：100px；左边框：50px实心黑色；右边框：50px实心黑色；边框底部：100px纯红色；}<div class=“triangle”></div>
然后在下一步中，我们没有任何宽度或高度，如下所示：
.三角形{宽度：0；高度：0；左边框：50px实心黑色；右边框：50px实心黑色；边框底部：100px纯红色；}<div class=“triangle”></div>
现在，我们使左边界和右边界不可见，以使理想的三角形如下所示：
.三角形{宽度：0；高度：0；左边框：50px实心透明；右边框：50px实心透明；边框底部：100px纯红色；}<div class=“triangle”></div>
如果您不愿意运行代码片段来查看步骤，我创建了一个图像序列，以查看一个图像中的所有步骤：
试试看：-
.三角形{边框颜色：透明透明红色透明；边框样式：实心；边框宽度：0px 200px 200px；高度：0px；宽度：0px；}<div class=“triangle”></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;
}
