前端怎么实现这种带尖角的图片聊天消息？

已注销

4221019

发布于
2017-11-24

图片描述

图片左边或者右边（自己发的消息）的部分隐藏，只显示尖角部分

javascript html css

html5

阅读 4.2k

7 个回答

得票最新

Bestime

4.8k2638

发布于
2017-11-24

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>无标题文档</title>
    </head>    
    <body>
        <style>
            body{margin:0;padding:0;}
            .demo{width:200px;height:100px;background:#ddd;position:relative;border-radius:8px;margin:20px auto;}
            .demo:before{content:'';position:absolute;margin:0;padding:0;font-size:0;line-height:0;border-width:10px;border-color:#ddd;border-style:dashed;border-left-width:0;border-right-style:solid;border-top-color:transparent;border-bottom-color:transparent;display:inline-block;left:-10px;top:50%;margin-top:-10px;}
        </style>
        <div class="demo"></div>
    </body>
</html>