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

换日线°2025-04-17 10:08

效果图

.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，很少看博客，对你有帮助别忘记点赞收藏。