css画三角形尺寸 |css产品展示

首先，在CSS中，每个元素都有四个边框：上、右、下、左。大家可以通过设置其中的某一个或几个边框的颜色、样式和宽度，来画出不同的形状。这个方法叫做“边框技巧”。

要画出三角形，大家需要把元素的三个边框中的两个设为透明，另一个边框设置颜色、样式和宽度。为了画出一个等边三角形，大家需要先将元素的高度设为0，宽度设置为等边三角形的边长。

.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 0 20px;
border-color: transparent transparent transparent #000;
}

上面的代码展示了如何画一个向右的三角形。第一行将元素的高度和宽度都设为0，第二行设置边框样式为实线，第三行设置边框宽度，其中第一个值表示上边框的宽度，第二个值表示右边框的宽度，第三个值表示下边框的宽度，第四个值表示左边框的宽度。第四行设置边框的颜色，其中第一个值表示上边框的颜色，第二个值表示右边框的颜色，第三个值表示下边框的颜色，第四个值表示左边框的颜色。这里为了画出一个黑色的三角形，将左边框的颜色设为#000。

如果想画出其他方向的三角形，可以根据实际情况更改边框颜色和样式的设置。例如，要画一个向上的三角形，可以将上边框设置为实线，右边框和左边框设置为透明，下边框设置为边框颜色、样式和宽度：

.triangle-up {
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 20px 10px;
border-color: transparent transparent #000 transparent;
}

这里的边框宽度的值表示上边框的宽度、右边框的宽度、下边框的宽度、左边框的宽度，边框颜色的值也按照这个顺序设置。可以根据需要更改值来画出不同形状的三角形。