<分区>
html - 在 CSS 中绘制三 Angular 形
我明白了
border-top: 50px solid transparent;
表示上边框的厚度为 50px，纯色且没有颜色。
我也明白了
border-right: 100px solid red;
表示右边框为 100 像素厚，为实心且为红色。
但是我不明白怎么...
#triangle-left
{ width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;}
可以做一个指向左边的三 Angular 形吗？
帮助理解将不胜感激。
最佳答案
CSS 边框实际上有对 Angular 线。
插图:
\-------/
| |
| |
| |
/-------\
所以 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 */
}
你会得到:
一个指向左边的三 Angular 形。
关于html - 在 CSS 中绘制三 Angular 形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18293304/