Css实现聊天框 - 码农教程

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8 />
    <title>css聊天框</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .chat {
            position: relative;
            max-width: 260px;
            padding: 10px 6px;
            border: 2px solid #ccc;
            margin-top: 50px;
            margin-left: 50px;
            border-radius: 5px;
            word-break: break-all;
        }

        .triangle,
        .triangle_two {
            position: absolute;
            top: 15px;
            border-width: 10px;
            border-style: solid;
        }

        .triangle {
            left: -20px;
            border-color: transparent #ccc transparent transparent;
        }

        .triangle_two {
            right: -20px;
            border-color: transparent transparent transparent #ccc;
        }

        .fill,
        .fill_two {
            position: absolute;
            top: 15px;
            border-width: 10px;
            border-style: solid;
        }

        .fill {
            left: -16px;
            border-color: transparent #fff transparent transparent;
        }

        .fill_two {
            right: -16px;
            border-color: transparent transparent transparent #fff;
        }
    </style>
</head>

<body>
    <div class="chat">
        <div class="triangle"></div>
        <div class="fill"></div>
        同乡您好，很高兴能够遇到你！可以跟我聊聊吗？
    </div>
    <div class="chat">
        <div class="triangle_two"></div>
        <div class="fill_two"></div>
        同乡您好，很高兴能够遇到你！可以跟我聊聊吗？
    </div>
</body>

</html>