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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Css实现瀑布流布局

    我们只需要设置最外层的父级(waterfall)和子级的父元素(poster)的css就可以

    任我行RQ
  • scrollReveal实现网页重复动画效果

    任我行RQ
  • Css修改滚动条样式

    任我行RQ
  • jQuery 遍历 - siblings() 方法应用

    每天写个小demo,最近工作小到1像素,大到n多优化,这个行业真的是有项目的时候忙的要死,没项目的时候闲的发慌,趁着办公室没人的时候,安安静静继续写代码,一个关...

    王小婷
  • 【免费】渗透测试室内一对一培训-工具篇更新

    https://pan.baidu.com/s/1i5tEFQk910b_UNXk_N-ADw 密码:fu5s

    Jumbo
  • 社交关系+大数据=?

    随着互联网的冲击,UGC(用户产生内容)不断发展,社交网络已经不断普及并深入人心,用户可以随时随地在网络上分享内容,由此产生了海量的用户数据。这些数据并不是我们...

    华章科技
  • 社交关系+大数据=?

    随着互联网的冲击,UGC(用户产生内容)不断发展,社交网络已经不断普及并深入人心,用户可以随时随地在网络上分享内容,由此产生了海量的用户数据。这些数据并不是我们...

    华章科技
  • 高性能Web动画和渲染原理系列(5)合成层的生成条件和陷阱

    之前介绍到了RenderLayer渲染层的概念,在涉及到硬件加速的话题时,出现了很多新的概念,参考《Webkit技术内幕》一书的介绍总结如下:

    大史不说话
  • 社交关系+大数据=?

    “大家还没搞清楚PC的时候,移动互联网来了,还没搞清楚移动互联网的时候,大数据来了。” 有个不太靠谱的命题:如何让赵本山和迈克尔乔丹搭上关系?其实很简单,...

    腾讯研究院
  • 前端应该掌握的5个语言语法层面

    1:ES6 标配各种特性要熟练掌握应用。 ECMAScript 6文档:http://caibaojian.com/es6/ ES6中文手册:https:...

    王小婷

扫码关注云+社区

领取腾讯云代金券