常用样式伪元素: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;}