开发中实用CSS干货总结（二）CSS伪元素实现微信聊天气泡框
2018-12-20 本文已影响4人
菜菜___
之前做过直播室的聊天记录，要求就是和微信的聊天记录一样的显示效果，下面是效果图：
我们只需要先画一个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后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。
