CSS 气泡写法

CSS Tooltip设计

最新推荐文章于 2025-10-24 11:24:05 发布

原创最新推荐文章于 2025-10-24 11:24:05 发布 · 973 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端学习

部署运行你感兴趣的模型镜像

图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Tooltip</title>
        <style>
            .triangle{
                width:0;
                height:0;
                border-width:0 50px 50px;
                border-style:solid;
                border-color:transparent transparent #999;
                margin: -50px auto;
                position:relative;
            }

            .triangle span{
                display:block;
                width:0;
                height:0;
                border-width:0 49px 49px;
                border-style:solid;
                border-color:transparent transparent #2B9FF8;
                position:absolute;
                top:1px;
                left:-49px;
            }

            .tooltip {
                width: 400px;
                height: 250px;
                border: solid #999 1px;
                margin: 200px auto;
                background-color: #2B9FF8;
                border-radius: 15px;
            }
        </style>
    </head>
    <body>
        <div class="tooltip">
            <div class="triangle">
                <span></span>
            </div>
        </div>
    </body>
    </html>