聊天气泡制作

清风白龙

于 2020-07-13 10:43:32 发布

阅读量527

点赞数

分类专栏： web前端基础笔记

本文链接：https://blog.csdn.net/qq_48784569/article/details/107312336

版权

web前端基础笔记专栏收录该内容

13 篇文章

订阅专栏

制造聊天气泡，准备一个div类名fa，如下代码：

    .fa {
            margin: 100px auto;
            width: 80px;
            height: 40px;
            border: 1px solid #000;
            position: relative;
            /* overflow: hidden; */
        }
        .fa::before {
            content: "";
            display: block;
            position: absolute;
            left: 20px;
            top: 41px;
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-top-color: #000;
        }
        .fa::after {
            content: "";
            display: block;
            position: absolute;
            left: 20px;
            top: 40px;
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-top-color: #fff;
        }

效果图：
在这里插入图片描述