[分享]css做一个直角三角形

CSS可以通过设置边框宽度以及利用 border-color属性实现各种各样的形状，包括直角三角形。

.triangle {
    width: 0;
    height: 0;
    border-bottom: 100px solid #3498db;
    border-left: 50px solid transparent;
} 

上面的代码就可以实现一个宽度为50像素，高度为100像素的蓝色直角三角形。其中，左右边框设置成了透明色，使得只有底部边框展现出来，从而形成三角形。

如果想要既有两条直角边，又有一条斜边，可以如下设置：

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

该代码会生成一个红色直角三角形，其中，底部和右侧边框设置成红色，顶部边框和左侧边框设置为透明，从而形成一个直角三角形。

CSS的边框属性还支持各种各样的样式和宽度，可以根据需要进行设置，实现更复杂的图形效果。