首页手记 CSS 气泡写法

CSS 气泡写法

标签：

Html5 CSS3

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>