在CSS中绘制一个三角形

Question

我理解

border-top: 50px solid transparent;

表示顶部边框的厚度为50px，将是实心的，没有颜色。

我也理解

border-right: 100px solid red;

表示右边框为100px，厚度为实线，为红色。

但我不明白......

#triangle-left 
{ width: 0; 
 height: 0; 
 border-top: 50px solid transparent;
 border-right: 100px solid red; 
 border-bottom: 50px solid transparent;} 

可以制作一个指向左边的三角形吗？

帮助理解会受到赞赏。

Answer 1

CSS边框实际上有对角线边缘。

插图：

\-------/
|       |
|       |
|       |
/-------\

所以border-right实际上是这样的：

/
|
|
|
\

使用height:0px时，border-right也没有高度，因此它看起来像这样：

/
\

现在，如果您使用以下css：

#triangle-left{ 
    width: 0; 
    height: 0; 
    border-top: 50px solid transparent; /* this will fill the top gap */
    border-right: 100px solid red; /* this will be the red triangle */
    border-bottom: 50px solid transparent; /* this will fill the bottom gap */
}

你会得到：

左边的三角形。