CSS三角形如何工作？
在CSS技巧中有很多不同的CSS形状 - CSS的形状，我对三角形特别困惑：
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}<div id="triangle-up"></div>CSS三角形：五幕中的悲剧
正如亚历克斯所说，等宽的边界以45度的角度彼此对接：
当你没有上边框时，它看起来像这样：
然后你给它的宽度为0 ...
...和0的高度...
...最后，你让两边的边框透明：
这导致了一个三角形。
边界使用相交的角度边缘（45°角和等宽边界，但改变边界宽度会使角度偏斜）。
的jsfiddle。
通过隐藏某些边界，您可以获得三角形效果（如上所示，通过使不同的部分具有不同的颜色）。 通常将transparent用作边缘颜色以实现三角形形状。
从一个基本的正方形和边界开始。 每个边界将被赋予不同的颜色，所以我们可以将它们区分开来：
.triangle {
border-color: yellow blue red green;
border-style: solid;
border-width: 200px 200px 200px 200px;
height: 0px;
width: 0px;
}
这给你这个：
但是不需要顶部边框，因此将其宽度设置为0px 。 现在我们的200px边界将使我们的三角形高度为200px。
.triangle {
border-color: yellow blue red green;
border-style: solid;
border-width: 0px 200px 200px 200px;
height: 0px;
width: 0px;
}
我们会得到这个：
然后要隐藏两个三角形，请将边框颜色设置为透明。 由于顶部边界已被有效删除，因此我们可以将边框顶部颜色设置为透明。
.triangle {
border-color: transparent transparent red transparent;
border-style: solid;
border-width: 0px 200px 200px 200px;
height: 0px;
width: 0px;
}
最后我们得到这个：
链接地址: http://www.djcxy.com/p/2573.html