css三角怎么简写

CSS三角形常常用于各种标签边框、箭头等等的样式美化，如何简写CSS样式呢？

.arrow {
   width: 0;
   height: 0;
   border-top: 5px solid transparent;
   border-right: 10px solid red;
   border-bottom: 5px solid transparent;
} 

上述代码即可生成一个向右的红色箭头。接下来，我们把它简写为一行：

.arrow {
   width: 0;
   height: 0;
   border: 5px solid transparent;
   border-right-color: red;
} 

可以发现，我们只用了一条border属性来代替了原来的三条。其中，前三个值指定了上、右、下三个方向的边框厚度、线型和颜色；第四个值则指定了右侧边框的颜色。这个简写方法不仅代码更加简洁，也便于维护和修改。

此外还有一个更为简便的方法，使用伪元素after或before来实现：

.arrow:before {
   content: "";
   display: inline-block;
   width: 0;
   height: 0;
   border: 5px solid transparent;
   border-right-color: red;
} 

上述代码只需要在.arrow元素前面插入一个伪元素before，并设置箭头样式即可。这个方法可以更加方便地实现各种样式变化，例如可以直接使用rotate属性旋转整个箭头，而不需要考虑边框与背景的关系。