vue css实现带有三角型箭头的边框（带边框阴影以及不带阴影）

css实现有阴影效果的三角箭头，实际上是让两个三角形（下图的箭头，外部阴影的是利用伪类after写的带阴影的箭头，内部是一个背景色为白色的三角形，这个三角形可以用伪类before写的）进行定位从而实现。如下图的效果

 html如下：

<div class="centerRegion">
    <div class="rightMore" @click="isMoerTouch = true" style="font-size: 0.2rem;
    margin-right: 0.05rem;"><span v-show="isMore">更多</span><span v-show="isShare">分享</span>
        <span v-show="isUpadate">下载</span><i
            style="background: url(../images/xiaojiantou.png) center center no-repeat;width: 0.2rem;"></i>
    </div>
</div>
<div v-if="isMoerTouch" class="updateShare">
    <div class="jianTouWeizhi">
        <div class="spanUp"></div>
        <div class="shareRegulation" @click="whoShow(true)">
            <i
                style="background: url(../images/fenxiang.png) center center no-repeat;width: 0.46rem;background-size: 100%;"></i><span
                style="line-height: 0.95rem;margin-left: 0.2rem;">分享法规</span>
        </div>
        <div class="updateRegulation" @click="whoShow(false)">
            <i
                style="background: url(../images/xiazai.png) center center no-repeat;width: 0.46rem;background-size: 100%;"></i><span
                style="line-height: 0.9rem;margin-left: 0.2rem;">下载法规</span>
        </div>
    </div>
</div>

css如下

.updateShare .jianTouWeizhi{
    position: relative;
}
.updateShare .jianTouWeizhi::before{
    box-sizing: content-box;
    position: absolute;
    top: -0.56rem;
    right:0.1rem;
    border-bottom:0.2rem solid #FFFFFF;
    border-top:0.2rem solid transparent;
    border-left:0.2rem solid transparent;
    border-right:0.2rem solid transparent;
    display: block;
    content:'';
    z-index: 2;
}
    .updateShare .jianTouWeizhi::after{
    box-sizing: content-box;
    position: absolute;
    top: -0.6rem;
    right:0.09rem;
    border-bottom:0.21rem solid rgba(0, 0, 0, 0.2);
    border-top:0.21rem solid transparent;
    border-left:0.21rem solid transparent;
    border-right:0.21rem solid transparent;
    display: block;
    content:'';
    z-index:1
    }

上述所说的是带有三角形阴影的边框，如果只需要一个三角形不带阴影边框的，那么更加简单，上述的html中在class为jiantouweizhi下加一个class为signUp的类，并加上如下的css即可

.updateShare .jianTouWeizhi .spanUp{
    width: 0;
    height: 0;
    border-bottom: 0.2rem solid #ffffff;
    border-right: 0.2rem solid transparent;
    border-left: 0.2rem solid transparent;
    position: absolute;
    top: -0.35rem;
    right: 0.2rem;
}

这样就可以实现如下效果（这是移动端，pc端可以改为px）

这样就不带阴影了