css实现微信聊天框

html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,target-densitydpi=medium-dpi,initial-scale=1, maximum-scale=1">
        <title></title>
    </head>
    <style type="text/css">
         #item {
        position: relative;
        width: 150px;
        min-height: 50px;
        background: #25a23b;
        border-radius: 5px;
        line-height: 50px;
        margin-left: 10px;
        word-break: break-word;
        color: white;
        padding: 5px;
        line-height: 18px;
    }
     #item::after {
            content: "";
            display: block;
            position: absolute;
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-right-color: #25a23b;
            top: 15px;
            left: -14px;
        }
    </style>
    <body>
        <p id="item">
            嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿
        </p>
    </body>
</html>

实现效果图

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,930评论 25 708
  • 一早醒来,打开朋友圈,看到好多朋友转发《罗一笑,你给我站住》这篇文章。 没有点开,只想当然是以为是一篇写孩子的文章...
    月亮的六便士19阅读 226评论 0 0
  • ✎作者:叨叨 公众微信坐望山特约作者,自由撰稿人。 谁说要有光,爱谁谁。 1 我是个孤儿,幼年时被师傅从死人堆里救...
    坐望山阅读 376评论 0 0
  • 火车终于到站,我已经困得想抱着背包就地躺下。夜里风大,气温也低,我穿着很漂亮的裙子冻得瑟瑟发抖。 又困又冷,又冷又...
    点击获取小可爱宣宣阅读 262评论 0 0
  • 还有不到10个小时就要高考了,一年的自己这时候在干嘛呢,我好像还在看书,或者早早就睡了吧,不知不觉我已经进入大学一...
    有气质的好女孩阅读 164评论 0 0