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

你会得到：

一个指向左边的三角形。