在CSS Tricks上有很多不同的CSS形状- CSS的形状,我特别对三角形感到困惑:

#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}Run Code Online (Sandbox Code Playgroud)
<div id="triangle-up"></div>Run Code Online (Sandbox Code Playgroud)
它是如何以及为什么有效?
我正在尝试将渐变应用到边框,我认为这样做很简单:
border-color: -moz-linear-gradient(top, #555555, #111111);
Run Code Online (Sandbox Code Playgroud)
但这不起作用.
有谁知道边界渐变的正确方法是什么?