[分享]css中如何设置小三角

CSS中小三角的设置常用于标签或菜单上，本文将介绍几种设置方法。

第一种设置方法：利用border属性。

.example1{
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 10px solid #999;
    border-bottom: 10px solid transparent;
} 

利用border属性的特性，我们将对角线方向的border设为透明，通过右边的border实现小三角。上下border可控制小三角的大小。

第二种设置方法：利用伪元素before或after。

.example2{
    position: relative;
}
.example2::before{
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    border-right: 10px solid #999;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    transform: translateY(-50%);
} 

利用伪元素before在标签内插入一个元素，通过绝对定位和transform属性使其位于标签左侧中央，再通过border实现小三角。同样利用上下border控制大小。

第三种设置方法：利用clip-path。

.example3{
    clip-path: polygon(0 0, 0 30%, 70% 30%, 70% 0, 100% 50%, 70% 100%, 70% 70%, 0 70%);
    background-color: #999;
} 

通过clip-path属性定义多边形裁剪区域，实现小三角。可通过调整多边形点的坐标和个数控制大小和形状。

以上是几种常用的小三角设置方法，具体实现视需求而定。