微信小程序之頁面中關於聊天框三角形的製作和使用

我最近需要寫一個消息通知的頁面，需要用到聊天框來展示通知信息。那麼這個聊天框該怎麼做呢？

我有三種方式可以實現。

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

代碼如下：

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;
}

效果圖：

好了，現在你可以通過上面的幾種方法改成任何你想要的效果了。

以上是我總結出來的有關三角形的製作與使用。算是比較齊全的了，有更好的方法可以評論區留言哦。