[分享]css写一个三角符号

在CSS中，我们可以使用border属性来创建一个三角形符号。为了使得三角形成为一个方向，我们需要将某些边缘的border设为transparent，这样它就只会描绘形状的某个侧面，而不是描绘一个矩形...

在CSS中，我们可以使用border属性来创建一个三角形符号。为了使得三角形成为一个方向，我们需要将某些边缘的border设为transparent，这样它就只会描绘形状的某个侧面，而不是描绘一个矩形。下面是一个创建向下箭头的例子：

.arrow-down {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid black;
} 

我们通过创建一个width和height都为0的元素，再通过设置某些border为透明来创造一个三角形形状。在这个例子中，我们创建了一个向下箭头，通过设置border-left和border-right为透明，只描绘了斜上侧和斜下侧的border，最后通过设置border-top的颜色为黑色来描绘箭头底部。

类似地，我们可以通过改变CSS代码来创造向上、向左和向右的箭头。例如，要创建一个向上的箭头，只需将border-top设置为透明并设置border-bottom为形状颜色即可：

.arrow-up {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid black;
} 

这样我们就可以用CSS来创造各种形状的三角形符号，而不需要使用图像或其他技术。