css 使用伪类元素实现小三角效果

今天使用css 伪类元素实现一个小三角的效果，很长时间没有用过了，今天发个博客记录下：

实现效果：

伪类代码：

.activeStatusItem::after{
    content:'';//一定要有它，否则效果出不来
    position:absolute;//给高亮元素定位，在这之前要给statusItem元素设置position:relative定位
    left:50%;
    bottom:-10px;
    transform: translate(-50%,0);//居中显示
    border:0.1rem solid transparent;//小三角的大小
    border-top-color:#428FFC;//小三角朝下

　　 // border-bottom-color:#428FFC;//小三角朝上

　　 // border-left-color:#428FFC;//小三角朝右

　　 // border-right-color:#428FFC;//小三角朝左

}