方法一：使用三角形的图片，定位在文本的左侧。

代码如下：

wxss部分：

.Angle {display: flex;align-items: center;z-index: 10;position: absolute;top: 10rpx;left: -5rpx;}

效果图为：

该方法不好用的地方是，不可以给它加边框颜色，因为它是一张图片，没有边框颜色，三角形那部分就感觉有点突出，缺少整体性了。

方法二：通过在页面中制作一个白色背景的正方形，然后对它进行45度旋转即可实现。

代码如下：

css部分：

.Angle {display: flex;align-items: center;z-index: 10;position: absolute;top: 10rpx;left: -5rpx;background: #fff;width: 35rpx;height: 35rpx;margin-top: 26rpx;transform: rotate(45deg);}

效果图：

它是一个菱形，不好用的地方是在于，它有可能会遮盖部分文字，因为我给他的z-index:10,它有一半部分在文本区。

方法三：直接制作一个三角形

最后一种方法，也是我个人喜欢的一种方法，它不仅不会影响文本的内容，还可以给他加边框等效果。不多说了，代码都亮出来。

wxml部分：

<view class="NewsContain"><view class="NewsInfo" wx:for="{{NewsInfo}}" wx:key='*this'><view class="InfoLeft"><image src="../../images/tongzhi.png" style="width:100rpx;height:100rpx;"></image></view><view class="InfoRight"><view class="Angle"></view><view class="Data"><view class="RightText">{{item.text}}</view><view class="RightTime">{{item.time}}</view></view></view></view>
</view>

wxss部分：

.Angle {border-top: 24rpx solid transparent;border-bottom: 24rpx solid transparent;border-right: 24rpx solid #fff;position: absolute;top: 22rpx;left: 10rpx;margin-left: -10px;
}.Angle:after {content: '';position: absolute;top: -25rpx;left: 20rpx;border-top: 35rpx solid transparent;border-bottom: 35rpx solid transparent;border-right: 35rpx solid #ccc;position: absolute;margin-left: -10px;z-index: -1;filter: blur(2px);
}

效果图为：

你可以发现它有边框阴影的效果，和右边的文本框形成一个整体，确实做到了我想要的效果，既不会影响文本，还可以给它添加边框等效果。

补充：用第三种方式，我是用到了阴影的效果，现在我来给他加正常的边框效果。

wxss部分：

.Angle {display:block;width:0;height:0;border-width:10px;border-style:solid;border-color:transparent #f60 transparent transparent;position:absolute;top:8px;left:-20px;
}.Angle:after {content: '';display:block;width:0;height:0;border-width: 10px;border-style:solid;border-color:transparent #fff transparent transparent;position:absolute;top:-10px;left:-9px;
}

效果图：

好了，现在你可以通过上面的几种方法改成任何你想要的效果了。

以上是我总结出来的有关三角形的制作与使用。算是比较齐全的了，有更好的方法可以评论区留言哦。

微信小程序之页面中关于聊天框三角形的制作和使用相关推荐

《微信小程序案例8》实现聊天框下部分别人向我发消息
一.先安装node.js 如若安装时出现磁盘无效的报错信息,以下解决方法 1.win+r 输入subst Y: %TEMP% 2.再次win+r 输入subst Y:/Y Y代表报错时出现的 ...
微信小程序——好看的radio单选项框，wxml里列表中遍历数组获取id传回给js页面
微信小程序--好看的radio单选项框第一种效果图如下: .wxss代码: .view_container {display: flex;flex-direction: row;justify-c ...
微信小程序app.js中的全局变量globalData改变，如何通知其它页面界面显示改变，小程序中如何在其他页面中监听到globalData中值的变化
微信小程序app.js中的全局变量globalData改变,如何通知其它页面界面显示改变,小程序中如何在其他页面中监听到globalData中值的变化在小程序中,我们一般在app.js的onLaun ...
微信小程序之页面打开数量限制
微信小程序之页面打开数量限制无论是在小程序还是APP中,打开一个页面其实就是创建了一个新的View对象,一层层叠加的.当点击页面的回退按钮就是把当前页面关闭. 这个过程中会涉及到一个问题,就是打开页 ...
微信小程序：页面传递中文出现乱码
微信小程序:页面传递中文 decodeURIComponent() 参考微信小程序页面中文传参Option获取参数乱码问题
微信小程序某个页面直接返回首页（微信小程序回退到首页）
微信小程序某个页面直接返回首页(微信小程序回退到首页) 打开小程序后,到三级页面后点击左上角的返回按钮,能够直接返回到首页正常 A -> B -> C 都是通过 wx.navigate ...
微信小程序tabar页面不触发onShow
微信小程序tabar页面不触发onShow [场景]: 开发中,原本js里面没有onShow方法,后面加上了onShow, 除了第一次页面加载调用了onShow方法,之后切换页面都没有触发. [解决办 ...
uniapp开发微信小程序-4.页面跳转与横向滑动
uniapp开发微信小程序-4.页面跳转与横向滑动本篇文章主要是想记录一下横向滑动功能,备忘的同时给大家做个分享. 但既然是初级分享系列文章,为了方便新手朋友的上手工作,还是在此之前说一下页面跳转的 ...
微信小程序开发-页面跳转传递参数
微信小程序开发-页面跳转传递参数页面跳转有四种方式,分别为wx.navigateTo.wx.redirectTo.wx.reLaunch.wx.switchTab,前面三种可通过url路径携带参数实 ...

微信小程序之页面中关于聊天框三角形的制作和使用

文章目录

方法一：使用三角形的图片，定位在文本的左侧。

方法二：通过在页面中制作一个白色背景的正方形，然后对它进行45度旋转即可实现。

方法三：直接制作一个三角形

微信小程序之页面中关于聊天框三角形的制作和使用相关推荐

最新文章

热门文章