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

<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>

.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;
}