css一个带箭头的对话框

最新推荐文章于 2024-06-28 09:43:34 发布

转载最新推荐文章于 2024-06-28 09:43:34 发布 · 194 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sonicwater/p/8341193.html

css一个带箭头的对话框

内容内容内容内容内容

利用 :before 和 :after 伪类添加样式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css对话框箭头</title>
        <style>
            .comment{
                width: 300px;
                border: 1px solid #376956;
                position: relative;
                background-color: #D0E9FF;
                padding: 10px 20px;
                border-radius: 8px;
                position: relative;
                margin-left: 20px;
            }
            .comment:before, .comment:after {
                content: "";
                display: block;
                border-width: 12px;
                position: absolute;
                top: 20px;
                left: -24px;
                border-style: solid dashed dashed;
                border-color: transparent #376956 transparent transparent;
                font-size: 0;
                line-height: 0;
            }
            .comment:after {
                top: 20px;
                left: -23px;
                border-color: transparent #D0E9FF transparent transparent;
            }
        </style>
    <body>
        <div class="comment">
            <p>内容内容内容内容内容</p>
            <p>内容内容内容内容内容</p>
        </div>
    </body>
</html>

posted on 2018-01-24 13:22 sonicwater 阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/sonicwater/p/8341193.html