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

效果图

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

相关推荐
β添砖java9 小时前
CSS网格布局
前端·css·html
Nan_Shu_6141 天前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
尘似鹤1 天前
微信小程序学习(三)补充
学习·微信小程序
老华带你飞1 天前
机电公司管理小程序|基于微信小程序的机电公司管理小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·微信小程序·小程序·机电公司管理小程序
EveryPossible1 天前
带有渐变光晕
前端·javascript·css
qianmo20211 天前
基于any2web+deepseek实现对三角函数定义的理解
css·html·css3
涛声依旧1 天前
基于springBoot鲜花商城小程序
java·spring·微信小程序
卷Java1 天前
小程序前端功能更新说明
java·前端·spring boot·微信小程序·小程序·uni-app
卷Java1 天前
小程序原生导航栏返回键实现
spring boot·云原生·微信小程序·uni-app
知识分享小能手1 天前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(下)——知识点详解 + 案例实战(5)
前端·javascript·学习·微信小程序·小程序·vue·前端开发