css写一个三角符号 |图片变模糊css

.arrow {
width: 0; 
height: 0; 
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #ccc;
}

上面的代码中，大家定义了一个名为arrow的CSS类。接下来，大家解释一下各个属性的含义注释：

1. width: 0; height: 0;

设置元素的宽度和高度为0，这是因为大家要通过设置边框的大小来实现三角形的形状。

2. border-left: 50px solid transparent;

设置左边框的大小为50像素，边框样式为实线，边框颜色为透明。这里需要注意的是，大家只设置了左边框的大小，而其他三个边框的大小都为0，所以整个元素只有一个三角形的形状。

3. border-right: 50px solid transparent;

设置右边框的大小为50像素，边框样式为实线，边框颜色为透明。

4. border-bottom: 100px solid #ccc;

设置底部边框的大小为100像素，边框样式为实线，边框颜色为灰色。这个部分的高度就是三角形的高度，可以根据实际需求进行调整。

最终的效果就是一个灰色的三角形，如下所示：

通过上述的代码，大家可以看到，只需要使用CSS就可以轻松地创建一个漂亮的三角形。不管是作为装饰还是作为图表中的箭头，这种效果总是能够起到很好的作用。