在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 */
}

你会得到:

一个左边的三角形.