微信小程序边框容器带三角指向

效果图

.wxml

<view class="tb"><view class="tb-pointer" style="--n:{{n}}rpx;" />
</view>
<button bind:tap="addPixel">增加三角一个像素</button>

.js

Page({data: {n:16,},addPixel(){this.setData({n:this.data.n + 2})},
})

.wxss

.tb {position: relative;width: 300px;height: 180px;border: 1px solid #333;margin: 100rpx auto;
}
.tb-pointer{position: absolute;top: calc(-2 * var(--n));left:0;right: 0;margin: 0 auto;width: 0;height: 0;border:var(--n) solid transparent;   border-bottom-color: #333;
}
.tb-pointer::before{content:'';position: absolute;bottom: calc(-1 * var(--n));left: calc(-1 * (var(--n) - 4rpx));border:calc(var(--n) - 4rpx) solid transparent;   border-bottom: calc(var(--n) - 2rpx) solid #fff;      
}

遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。