css三角形 arrow-outer

CSS中有一个神奇的技巧可以用来创建三角形，那就是使用arrow-outer。这个技巧比起其他绘制三角形的方式来说要简单得多，并且可以在各种不同的情况下使用。

.arrow-outer {
    position: relative;
    width: 0;
    height: 0;
    border-top: 10px solid red;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
} 

在使用arrow-outer时，需要遵循一些规则。首先，需要将元素的position属性设置为relative或absolute，这样才能使它的边框成为三角形。其次，我们需要将元素的width和height属性设置为0，避免元素变形。然后，通过设置border属性，我们可以控制三角形的大小、方向和颜色。

其中border-top属性用于设置三角形的高度，而border-right、border-bottom、border-left属性则控制三角形各边的长度，同时可以设置一些透明度。在这个例子中，我们设置了红色的上边框，其余边框均为透明。通过这些属性的组合，我们就可以得到一个简单的三角形了。

需要注意的是，arrow-outer的效果只能在没有背景颜色的元素上使用，如果需要在有背景颜色的元素上使用三角形，可以考虑使用伪元素before和after结合arrow-outer来实现。此外，在使用arrow-outer的时候，还需要考虑元素和父元素的尺寸、外边距和内边距等因素，以达到理想的效果。