晴明的博客园 GitHub      CodePen      CodeWars     

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

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

 

posted @ 2016-02-18 16:01  晴明桑  阅读(860)  评论(0)    收藏  举报