css仿微信聊天对话框

最新推荐文章于 2024-06-29 12:32:49 发布

假装我不帅

最新推荐文章于 2024-06-29 12:32:49 发布

阅读量678

点赞数 1

分类专栏： css 文章标签： css css3 前端

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

直接上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            margin: 100px auto;
            background-color: #f5f5f5;
        }

        .left,
        .right {
            width: 80px;
            height: 40px;
            border-radius: 5px;
            background-color: #95ec69;
            position: relative;
            margin: 10px 0;
            line-height: 40px;
        }
        
        .left{
            margin-left: 20px;
            padding-left: 5px;
        }
        
        .right{
            float: right;
            margin-right: 20px;
            padding-left: 5px;
        }

        .left::before {
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            /* 边框宽度为5px 颜色透明(也就是隐藏) */
            border: 5px solid transparent;
            /* 箭头向左 则右边框显示 */
            border-right-color: #95ec69;
            /* 在div左边展示 偏移量为 边框宽度*2 即5*2px */
            left: -10px;
            /*垂直居中计算*/
            /*如果有高度 则(父元素高度 - 子元素高度 )/2 */
            /*如果是边框 则(父元素高度 - 边框宽度*2 )/2 */
            /* (40-5*2)/2=15 */
            top: 15px;
        }

        .right::before {
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            /* 边框宽度为5px 颜色透明(也就是隐藏) */
            border: 5px solid transparent;
            /* 箭头向右 则左边框显示 */
            border-left-color: #95ec69;
            /* 在div右边展示 偏移量为 边框宽度*2 即5*2px */
            right: -10px;
            /*垂直居中计算*/
            /*如果有高度 则(父元素高度 - 子元素高度 )/2 */
            /*如果是边框 则(父元素高度 - 边框宽度*2 )/2 */
            /* (40-5*2)/2=15 */
            top: 15px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">
            你好啊
        </div>
        <div class="right">你好~~</div>
        <div style="clear: both;"></div>
    </div>
</body>

</html>