开发中实用CSS干货总结（二）CSS伪元素实现微信聊天气泡框

之前做过直播室的聊天记录，要求就是和微信的聊天记录一样的显示效果，下面是效果图：

我们只需要先画一个div，为其加上边框，然后在边框的左边或者右边加上两个相同大小的三角形，一个三角形与div有相同颜色的边框，另一个三角形边框色为白色，用于覆盖前一个三角形的一部分，这样看起来便是一个整体了，上一篇已经讲过css绘制实心三角形，这里直接附上代码：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.wrap{position: relative;width: 300px;height: 80px;margin: 50px auto;box-shadow: 0px 2px 7px 0px rgba(123, 123, 123, 0.17);border: solid 1px #e5e5e5;border-radius: 4px;}.wrap:before, .wrap:after{content: "";position: absolute;top: 34px;border-top: 6px solid transparent;border-bottom: 6px solid transparent;}.wrap:before{left: -10px;border-right: 10px solid #e5e5e5;}.wrap:after{/*划重点，这里需要离div更近才能盖住上一个三角形*/left: -8px;border-right: 10px solid #fff;}</style>
</head>
<body>
<div class="wrap">
</div>
</body>
</html>

原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。

开发中实用CSS干货总结（二）CSS伪元素实现微信聊天气泡框相关推荐

用vscode编写静态页面_开发中实用的VSCode插件推荐
本篇文章给大家介绍一下开发中实用的VSCode插件推荐.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 工欲善其事必先利其器,以下是本人为前端开发收集的vscode插件,有需要的话赶 ...
试用php语言写气泡,如何用纯CSS实现语音聊天气泡框效果
本篇文章主要给大家介绍怎么用纯css实现语音聊天气泡框效果. 推荐参考教程:<CSS教程> 语音聊天气泡框效果,在我们日常生活中或者社交网站上,都是非常常见且流行的一种对话框效果. 比如微 ...
UI设计中聊天气泡框的设计技巧
聊天气泡我们很熟悉,每天都要和他打交道.早上醒来第一-件事你是不是打开微信看看.那在和朋友聊天时,你有没有这样的疑问,为什么输入文字多少不同,气泡的展示也不同?为什么发送不同比例的图片,其缩略图的展示 ...
开发中实用CSS干货(持续不稳定更新)
在这写一下平时自己工作碰到或者别人叫我写的实用CSS干货更新随缘聊天气泡三角形评价星星优惠券样式上下左右空心箭头上下左右三角形&上下左右实心箭头聊天气泡三角形 /*气泡*/ .b ...
Web 开发中 20 个很有用的 CSS 库
在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供了一系列功能和特性.每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发.像CSS 库,框架,应用这样的工具能够为开发者做 ...
css before after用法_CSS 伪元素基础知识：content 与counter 实用技巧（二）
在CSS 伪元素基础知识:before 与after (一),笔者已经介绍过 CSS 里的::before 和::after 这两个伪元素,以及content 相关的用法,这篇将针对content 搭 ...
在代码中实用协程（二）
第一篇的链接:在代码中实用协程(一) 在网络处理程序中,一个协程正在接收网络请求者,一个协程正在循环发包,另一个协程中正发生错误,删除链接. 问题:是否可以循环链表同时进行删除和添加操作先看一段流程 ...
CSS - 基于before及after伪元素添加字符
前言就像在电视剧<迷离时空>(The Twilight Zone)中遗失的一集一样,CSS提供的新属性赋予了使用者在内容中添加伪标记的能力.可能听起来会有点奇怪,但这种方法却有着众多的应 ...
【CSS】如何实现微信聊天气泡
先来分析一下聊天气泡气泡分割为两部分,左边的矩形,右边的三角形矩形的实现比较简单先对对右边的三角形进行分析 div{ width:100px; height:100px; border:soli ...

开发中实用CSS干货总结（二）CSS伪元素实现微信聊天气泡框

开发中实用CSS干货总结（二）CSS伪元素实现微信聊天气泡框相关推荐

最新文章

热门文章