css3 绘制直角三角形 |纯css幻灯片代码简洁

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

上面的代码定义了一个类名为 triangle 的元素，然后通过 border-top、border-right、border-bottom 来定义直角三角形的样式。其中，width 和 height 是必须要定义的，因为它们是控制三角形大小的属性。

其中，border-top 是用来控制三角形上边缘的宽度，border-right 是用来控制右边缘的宽度，border-bottom 是用来控制下边缘的宽度。由于大家要创建一个直角三角形，所以 border-top 需要设置成透明的，这样才能只显示两个边缘的颜色，形成直角。

使用上面的代码，就可以创建一个简单的红色的直角三角形了。

.triangle{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid #f00;
border-bottom: 50px solid #f00;
transform: rotate(45deg);
}

如果大家想要创建一个倾斜的直角三角形，可以使用 transform: rotate(45deg) 来实现。这样可以将三角形旋转 45 度，使其倾斜。

总结一下，CSS3 中的绘制直角三角形是通过设置元素的 border 属性来实现的。同时，大家也可以利用 transform 属性来实现倾斜的效果。