CSS 气泡写法

最新推荐文章于 2024-06-07 09:07:16 发布

html5_css3_js

最新推荐文章于 2024-06-07 09:07:16 发布

阅读量909

点赞数

文章标签： css 前端学习

本文链接：https://blog.csdn.net/html5_css3_js/article/details/80127261

版权

图片描述

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

html5_css3_js

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 气泡写法

&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Tooltip&lt;/title&gt; &lt;style&gt;
复制链接

扫一扫