Html - 对话箭头

对话箭头

<!DOCTYPE HTML>

<html lang="en-US">

    <head>

        <meta charset="UTF-8">

        <title>箭头</title>

        <style type="text/css">
            .pr {
                position: relative;
            }
            
            .reply-content {
                background-color: #fcfcfc;
                border: 1px solid #fcfcfc;
                border-radius: 4px;
                box-shadow: 0 0 5px #ccc;
                padding: 0.6em;
                width: 50%;
                margin: 0px auto;
            }
            
            .arrow {
                border-color: transparent #fff transparent transparent;
                border-style: dashed solid dashed dashed;
                border-width: 6px;
                display: block;
                font-size: 0;
                height: 0;
                left: -12px;
                line-height: 0;
                position: absolute;
                top: 8px;
                width: 0;
                z-index: 999;
            }
            /*箭头向上*/
            
            .arrow-up {
                width: 0;
                height: 0;
                border-left: 30px solid transparent;
                border-right: 30px solid transparent;
                border-bottom: 30px solid #f00;
            }
            /*箭头向右*/
            
            .arrow-right {
                width: 0;
                height: 0;
                border-top: 20px solid transparent;
                border-bottom: 20px solid transparent;
                border-left: 20px solid green;
            }
            /*箭头向下*/
            
            .arrow-down {
                width: 0;
                height: 0;
                border-left: 40px solid transparent;
                border-right: 40px solid transparent;
                border-top: 40px solid #ccc;
            }
            /*箭头向左*/
            
            .arrow-left {
                width: 0;
                height: 0;
                border-top: 30px solid transparent;
                border-bottom: 30px solid transparent;
                border-right: 30px solid #00f;
            }
        </style>

    </head>

    <body>

        <div class="reply-content pr">

            <span class="arrow"></span> 喵了个咪日了狗了

        </div>

    </body>

 

posted @ 2016-03-27 09:55  贝尔塔猫  阅读(505)  评论(0)    收藏  举报