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

最新推荐文章于 2023-03-23 14:40:27 发布

caicai1171523597

最新推荐文章于 2023-03-23 14:40:27 发布

阅读量655

点赞数

本文链接：https://blog.csdn.net/caicai1171523597/article/details/86642551

版权

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

我们只需要先画一个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后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。

caicai1171523597

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
开发中实用CSS干货总结（二）CSS伪元素实现微信聊天气泡框

之前做过直播室的聊天记录，要求就是和微信的聊天记录一样的显示效果，下面是效果图：我们只需要先画一个div，为其加上边框，然后在边框的左边或者右边加上两个相同大小的三角形，一个三角形与div有相同颜色的边框，另一个三角形边框色为白色，用于覆盖前一个三角形的一部分，这样看起来便是一个整体了，上一篇已经讲过css绘制实心三角形，这里直接附上代码...
复制链接

扫一扫