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

最新推荐文章于 2024-08-28 22:01:51 发布

做咩呀？搬砖！

最新推荐文章于 2024-08-28 22:01:51 发布

阅读量2.1k

点赞数 15

文章标签： html css css3 vue.js

本文链接：https://blog.csdn.net/lxs_bzdmn/article/details/117029924

版权

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