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

最新推荐文章于 2024-06-29 12:32:49 发布

期待一片自己的蓝天

最新推荐文章于 2024-06-29 12:32:49 发布

阅读量2.2k

点赞数

分类专栏： web前端文章标签： html css 对话框 triangle

本文链接：https://blog.csdn.net/nyist327/article/details/50681724

版权

web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

实现效果如下：

前面的小三角形的原理是利用两个三角形，一个是黑色，一个白色，利用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>