css将方形变为三角形 |css 与 html5 响应式图片

代码如下：
.triangle {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 50px solid gray;
border-right: 50px solid transparent;
}

大家可以看到，这里设置了一个类名为.triangle的元素，使用了三条border属性，其中两条是透明的，一条是要显示的颜色。

具体来说，大家将元素的宽和高设置为0，然后设置上/左/右三个边框的宽度和颜色。这样，页面上就会显示一个等腰三角形了。

需要注意的是，上方的border-top属性必须设置为0才能画出三角形，否则元素会成为一个梯形。

在实际开发中，大家可以根据需求来调整三个边框的宽度和颜色，从而得到不同样式的三角形。比如，如果将左边框宽度设为0，右边框设为20px，则可以得到一个向右的尖角。

代码如下：
.triangle-right {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-left: 0;
border-right: 20px solid red;
}

以上就是将方形元素变成三角形的方法，希望能够帮助大家在前端开发中更好地应用CSS。