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

代码如下：
在这里插入图片描述
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;
}

效果图：
在这里插入图片描述
好了，现在你可以通过上面的几种方法改成任何你想要的效果了。