Html 用CSS绘制三角形

我明白

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;} 

你能画一个指向左边的三角形吗

---

如果有助于理解，我们将不胜感激。

CSS边框实际上有对角边

说明：

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

所以右边的边框实际上是这样的：

/
|
|
|
\

/
\

使用

height:0px

，

右边框

也将没有高度，因此它将如下所示：

/
|
|
|
\

/
\

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

#左三角形{
宽度：0；
身高：0；
边框顶部：50px实心透明；/*这将填充顶部间隙*/
右边框：100px实心红色；/*这将是红色三角形*/
边框底部：50px实心透明；/*这将填充底部间隙*/
}

您将获得：

---

指向左边的三角形。

CSS边框实际上有对角边

说明：

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

所以右边的边框实际上是这样的：

/
|
|
|
\

/
\

使用

height:0px

，

右边框

也将没有高度，因此它将如下所示：

/
|
|
|
\

/
\

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

#左三角形{
宽度：0；
身高：0；
边框顶部：50px实心透明；/*这将填充顶部间隙*/
右边框：100px实心红色；/*这将是红色三角形*/
边框底部：50px实心透明；/*这将填充底部间隙*/
}

您将获得：

---

一个指向左边的三角形。

为了挑剔你的第一句话，如果两个相邻的边界大小相同，角度只有45度。@Spudley是的，我已经更新了。。正如你所说的，这取决于宽高比，因为JSFIDLE moansTo挑剔你的第一句话，如果两个相邻的边界大小相同，角度只有45度。@Spudley是的，我已经更新了。。正如您所说的，这取决于宽高比，因为jsfiddle发出呻吟