CSS 对话框小三角效果

た入场券 2023-06-25 08:28 9阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>H5 对话框</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            html {
                font-size: 100px;
            }
    
            body {
                width: 100vw;
                font-size: 0.15rem;
                color: #121212;
            }
    
            .dialog {
                width: 100%;
                height: 0.3rem;
                background-color: #80b747;
                color: #ffffff;
                font-size: 0.14rem;
                position: relative;
                line-height: 0.242rem;
            }
            .triangle:before {
                content: '';
                border-right: 0.05rem solid transparent;
                border-top: 0;
                border-bottom: 0.05rem solid #80b747;
                border-left: 0.05rem solid transparent;
                position: absolute;
                right: 4%;
                top: 0;
                margin-top: -0.04rem;
            }
        </style>
    </head>
    
    <body>
        <div class="dialog triangle">我是对话框里的内容</div>
    </body>
    
    </html>

## **效果展示：** ##

![20191227175451978.png][]

[20191227175451978.png]: https://img-blog.csdnimg.cn/20191227175451978.png

发表评论取消回复

表情：

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

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

相关阅读

相关在线生成css3气泡对话框，倒三角，下拉倒三角

https://www.jiangweishan.com/tool/sanjx/index.html http://code.ciaoca.com/style/bubble/

痛定思痛。/ 2023年07月24日 15:59/ 0 赞/ 584 阅读

相关 css实现小三角

在很多地方我们可以用得上小三角，接下来我们画一下四个方向的三角形 triangle { / 基础样式 / border: solid 10p

不念不忘少年蓝@/ 2023年07月19日 03:40/ 0 赞/ 20 阅读

相关 CSS 对话框小三角效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

た入场券/ 2023年06月25日 08:28/ 0 赞/ 10 阅读

相关 CSS对话框案例

用到了伪元素before和after <!DOCTYPE html> <html> <head> <meta charset="UTF-

我就是我/ 2023年02月19日 10:22/ 0 赞/ 16 阅读

相关 css 右边三角

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

素颜马尾好姑娘i/ 2022年09月05日 14:57/ 0 赞/ 225 阅读

相关 Android 毛玻璃效果对话框

一个popwindow，在弹出的时候背景是原界面的截图加高斯模糊效果 ![Center][] 先给出popwindow的布局文件 <?xml version

朱雀/ 2022年08月18日 14:20/ 0 赞/ 217 阅读

相关 CSS制作三角边框

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>字符制作三角边

比眉伴天荒/ 2022年08月07日 13:35/ 0 赞/ 202 阅读

相关【CSS】css三角提示框

现在我们有一个需求，就是三角提示框像这样： ![Center][] 注意这个三角导航，我们需要达到这样的效果。第一种办法：现在有两种方案，第一种需要用到css3

「爱情、让人受尽委屈。」/ 2022年07月13日 11:54/ 0 赞/ 230 阅读

相关 CSS写三角

css写小三角 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT

Love The Way You Lie/ 2022年06月14日 10:37/ 0 赞/ 253 阅读

相关纯 css 实现三角效果

之前写过一篇关于 border 如何实现一个三角形的方法，这一次，我们将在这个的基础上实现下面的效果： ![70][] 关于尺寸方面，自己看着来就行，无所谓的；

旧城等待，/ 2022年05月28日 07:25/ 0 赞/ 372 阅读