常用样式伪元素:after,:before下三角

html

<transition name="fade" mode="out-in">
    <div class="child" v-if="isShowChildMenu" @click="getRouter4">
        <span @click="getRouter5" :class="{active:shop.navActive == 1}">购买商品span>
        <span @click="getRouter6" :class="{active:shop.navActive == 1}">我的订单span>
    div>
transition>

css

.child:after, .child:before {
   border: solid transparent;
    content: ' ';
    height: 0;
    top: 100%;
    position: absolute;
    width: 0;
}
.child:after {
    border-width: 0.16rem;
    border-top-color: #fff;
    left: 50%;
    margin-left: -0.16rem;
}
.child:before {
    border-width: 0.22rem;
    border-top-color: #e1e1e1;
    left: 50%;
    margin-left: -0.215rem;
}