继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

CSS 气泡写法

慕雪芸茗
关注TA
已关注
手记 13
粉丝 66
获赞 479

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>

代码效果:

图片描述

打开App,阅读手记
4人推荐
发表评论
随时随地看视频慕课网APP