微信小程序实现对话框三角形

最新推荐文章于 2021-12-16 23:51:57 发布

Jxufe渣渣斯

最新推荐文章于 2021-12-16 23:51:57 发布

阅读量892

点赞数

分类专栏：前端（微信小程序、Web开发等）

原文链接：https://www.cnblogs.com/wdlhao/p/5484141.html

版权

前端（微信小程序、Web开发等）专栏收录该内容

40 篇文章 21 订阅

订阅专栏

该博客详细介绍了如何使用HTML和CSS创建类似微信对话框中的小三角形效果，包括左右不同方向的气泡以及对应的颜色设定。通过调整border属性实现气泡的形状，并通过改变背景颜色和边框宽度来区分发送和接收的消息。

摘要由CSDN通过智能技术生成

参考链接：
（1）流浪的诗人-微信对话框小三角形实现
https://www.cnblogs.com/wdlhao/p/5484141.html
【友情链接】https://github.com/wdlhao

（1）效果图
在这里插入图片描述

（2）代码

<!DOCTYPE html>
<html>
	<head>
		<title>微信会话小三角</title>
		<meta charset="utf-8">
		<style type="text/css">
			body {
				font-family: "Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
				height: 100%;
				-webkit-background-size: cover;
				background-size: cover;
				-webkit-font-smoothing: antialiased;
				line-height: 1.6;
			}
			::-webkit-scrollbar-track {
				background-color: transparent;
			}
			.bubble.right:before, .bubble.right:after {
				left: 100%;
			}
			.bubble.left:before, .bubble.left:after {
				left: 100%;
			}
			/* 1. 描绘出位置和形状;*/
			.bubble:before, .bubble:after {
				position: absolute;
				top: 14px;
				border: 6px solid transparent;
				content: " ";
			}
			/* 2.border-left:color,width设置; */
			.bubble.bubble_primary.right:after {
				border-left-color: #b2e281;
				border-left-width: 4px;
			}
			/*3。div背景颜色*/
			.bubble.bubble_primary.right {
				background-color: #b2e281;
				margin-bottom: 20px;
			}
			.bubble.bubble_primary.left {
				background-color: #b2e221;
			}
			.bubble.bubble_primary.left:before {
				border-right-color: #b2e281;
				border-right-width: 4px;
				left: -10px;
			}
			.bubble_cont {
				word-wrap: break-word;
				word-break: break-all;
				min-height: 25px;
			}
			.bubble {
				max-width: 500px;
				min-height: 1em;
				/* display: inline-block; */
				vertical-align: top;
				position: relative;
				text-align: left;
				font-size: 14px;
				border-radius: 3px;
				-moz-border-radius: 3px;
				-webkit-border-radius: 3px;
				margin: 0 10px;
			}
			.bubble_cont .plain {
				padding: 9px 13px;
			}
			pre {
				margin: 0;
				font-family: inherit;
				font-size: inherit;
				white-space: pre-wrap;
				word-break: initial;
			}
		</style>
	</head>
	<body>
		<div class="bubble js_message_bubble ng-scope bubble_primary right">
			<div class="bubble_cont ng-scope">
				<div class="plain">
					<pre class="js_message_plain ng-binding" >好久不见了，最近好吗？</pre>
				</div>
			</div>
		</div>
		<div class="bubble js_message_bubble ng-scope bubble_primary left">
			<div class="bubble_cont ng-scope" >
				<div class="plain">
					<pre class="js_message_plain ng-binding" >还好，你那边怎么样？</pre>
				</div>
			</div>
		</div>
	</body>
</html>