[css] css&html 实现聊天气泡 demo

最新推荐文章于 2023-02-23 16:04:10 发布

aefg95955

最新推荐文章于 2023-02-23 16:04:10 发布

阅读量412

点赞数

原文链接：http://www.cnblogs.com/qingmingsang/articles/5198473.html

版权

<html>

    <head>

        <style type="text/css">
            .arrow {
                width: 0;
                height: 0;
                font-size: 0;
                border: solid 10px #000;
            }
            
            .arrow2 {
                width: 0;
                height: 0;
                font-size: 0;
                border: solid 10px;
                border-color: #f00 #0f0 #00f #000;
            }
            
            .send {
                position: relative;
                width: 150px;
                height: 35px;
                background: #F8C301;
                border-radius: 5px;
                margin: 30px auto 0;
            }
            
            .send .arrow3 {
                position: absolute;
                top: 5px;
                right: -16px;
                width: 0;
                height: 0;
                font-size: 0;
                border: solid 8px;
                border-color: #4D4948 #4D4948 #4D4948 #F8C301;
            }
        </style>
    </head>

    <body>
        <div class="arrow"></div>
        <div class="arrow2"></div>

        <div class="send">
            <div class="arrow3"></div>
        </div>

    </body>

</html>

转载于:https://www.cnblogs.com/qingmingsang/articles/5198473.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

aefg95955

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
[css] css&html 实现聊天气泡 demo

<html> <head> <style type="text/css"> .arrow { width: 0; height: 0; font-size: 0; ...
复制链接

扫一扫