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

效果图

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

相关推荐
他们叫我秃子21 小时前
从 0 到 1,我用小程序 + 云开发打造了一个“记忆瓶子”,记录那些重要的日子!
前端·微信小程序·小程序·云开发
San3021 小时前
CSS3 星球大战:用前端技术打造震撼的3D动画效果
前端·css·html
San3021 小时前
扩展卡片效果:用 Flexbox 和 CSS 过渡打造惊艳交互体验
前端·javascript·css
Qinana21 小时前
🌟 从 CSS 到 Stylus:打造更优雅、高效的样式开发体验
前端·javascript·css
AAA阿giao21 小时前
弹性布局:CSS 布局的“变形金刚”来了!
前端·css
烟袅21 小时前
🧱 从 inline-block 到 Flexbox:告别“空白符陷阱”,拥抱现代布局
前端·css
Zyx200721 小时前
弹性布局:告别“挤来挤去”的CSS布局时代——深入理解 Flexbox
前端·css
inx17721 小时前
用 HTML5 + CSS3 打造“星球大战”片头:一场视觉与代码的原力觉醒
css·html
trsoliu1 天前
2025年Web前端前沿技术动态:WebGL动画、CSS View Transitions与HTML隐藏API
前端·javascript·css
苹果电脑的鑫鑫1 天前
微信小程序原生如何使用画布生成名片
微信小程序·小程序