Html - 对话箭头

最新推荐文章于 2022-05-28 14:02:54 发布

dicha7140

最新推荐文章于 2022-05-28 14:02:54 发布

阅读量105

点赞数

原文链接：http://www.cnblogs.com/CyLee/p/5324999.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>

转载于:https://www.cnblogs.com/CyLee/p/5324999.html

dicha7140

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html - 对话箭头

对话箭头<!DOCTYPE HTML><html lang="en-US"> <head> <meta charset="UTF-8"> <title>箭头</title> <style type="text/css...
复制链接

扫一扫