利用css的before和after属性，实现类似QQ对话框效果

柔情只为你懂 2022-08-20 08:22 163阅读 0赞

实现效果如下：

![Center][]

前面的小三角形的原理是利用两个三角形，一个是黑色，一个白色，利用index属性，让白色的三角形覆盖黑色的三角形，白色三角形比黑色三角形靠右1px。下面是代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            p:before{content: "H"}
            p:after{content: "d"}
    
            .test-div{
                position: relative;
                width: 150px;
                height: 36px;
                border-radius: 5px;
                border: 1px solid black;
                background: rgba(245, 245, 245, 1);
            }
    
            .test-div:before, .test-div:after {
                content: "";
                display:block;
                position: absolute;
                top: 8px;
                width: 0;
                height: 0;
                border: 6px solid transparent;
                
            }
    
            .test-div:before {
                left: -11px;
                border-right-color: rgba(245, 245, 245, 1);
                z-index: 1;
            }
    
             .test-div:after {
                left: -12px;
                border-right-color: rgba(0, 0, 0, 1);
                z-index: 0;
            } 
        </style>
    </head>
    <body>
        <div class="test-div"><p>ello worl</p></div>
    </body>
    </html>

[Center]: /images/20220731/b2fb03680b504a5aa45c3ee41201a445.png

发表评论取消回复

表情：

评论列表（有 0 条评论，163人围观）

还没有评论，来说两句吧...

相关阅读

相关 css before 和 after

谈自己对after和before的学习；学css样式，before和after是必须要掌握的，但是直到最近我才感觉摸到他们的门槛； before和after是伪元素；

深碍√TFBOYSˉ_/ 2023年06月30日 10:55/ 0 赞/ 11 阅读

相关 css伪元素:before和:after用法详解

css的`伪元素`，之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css

一时失言乱红尘/ 2023年02月09日 13:18/ 0 赞/ 9 阅读

相关入门前端-CSS使用before、after以及 transform实现心形跳动效果

效果图 ![在这里插入图片描述][0babc7101d03412bb3f4b6690e701fd1.png] 分析通过`::before和::after`以及`

分手后的思念是犯贱/ 2022年09月04日 05:55/ 0 赞/ 228 阅读

相关深入研究 CSS 中的 ::before 和 ::after 伪元素

![16ef48fb825367da8dc56b8371765940.png][] 原文 | https://betterprogramming.pub/mastering-

今天药忘吃喽~/ 2022年09月02日 05:21/ 0 赞/ 189 阅读

相关利用css的before和after属性，实现类似QQ对话框效果

实现效果如下： ![Center][] 前面的小三角形的原理是利用两个三角形，一个是黑色，一个白色，利用index属性，让白色的三角形覆盖黑色的三角形，白色三角形比黑

柔情只为你懂/ 2022年08月20日 08:22/ 0 赞/ 164 阅读

相关 Android实现类似QQ的滑动删除效果

观察QQ的滑动删除效果，可以猜测可以滑动删除的部分主要包含两个部分，一个是内容区域（用于放置正常显示的view），另一个是操作区域（用于放置删除按钮）。默认情况下，操作区域是不

不念不忘少年蓝@/ 2022年08月19日 12:22/ 0 赞/ 246 阅读

相关 CSS中:before和:after选择器的用法

[![548de814-1957-4907-9c95-ca5dcc9f9310.png][]][548de814-1957-4907-9c95-ca5dcc9f9310.png

短命女/ 2022年08月12日 01:01/ 0 赞/ 131 阅读

相关使用before和after实现一些有意思的效果实例

主要就是运用before和after在元素前面和后面插入伪元素，实现一些有意思的小效果，嗯、直接上代码了（我展示的都是一些简单的效果，可以在此基础上让效果更炫酷，我觉得只要原理

「爱情、让人受尽委屈。」/ 2022年05月28日 10:44/ 0 赞/ 177 阅读

相关 css:after 和:before选择器 --笔记

CSS :after 选择器元素的内容之后插入新内容： :after 选择器在被选元素的内容后面插入内容。使用 content 属性来指定要插入的内容。并设置所

我不是女神ヾ/ 2022年05月18日 08:12/ 0 赞/ 135 阅读

相关 @Before和@After的区别

通常我们使用JUnit的时候，会有一些方法需要提前或最后执行，则需要如下几种方式进行注解 ![watermark_type_ZmFuZ3poZW5naGVpdGk_sh

绝地灬酷狼/ 2022年02月14日 09:12/ 0 赞/ 235 阅读