关闭
尊敬的极客用户,您好!
感谢您一直关注并使用极客头条,为了给您带来良好的体验效果及性能,极客头条将于2018年04月27日关闭,您可以在 我的博客 中继续使用发布文章功能并看到已经发布成功的文章。
返回 登录
3

CSS 气泡写法

阅读746

图片描述

    <!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>
评论