css如何画直角三角形 |css伸缩盒模型左对齐

css 竖向字体，css 隐藏显示元素，如何使用dreamweaver的css，css+边线宽度，css初始的旋转角度，css起源战术视频教程，css伸缩盒模型左对齐 css如何画直角三角形 |css伸缩盒模型左对齐

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

上面的代码可以画出一个直角在右下角的黑色三角形，其中width和height属性设置为0是因为宽高并不影响三角形的绘制，重要的是要设置好对应的边框。

如果要画直角在左下角的三角形，只需要将border-right改为border-left即可：

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

上述代码可以画出一个直角在左下角的黑色三角形。

通过以上的代码可以发现，大家可以自定义三角形的大小和颜色，也可以通过改变对应的边框来控制直角的位置。