前端怎么實(shí)現(xiàn)這種帶尖角的圖片聊天消息？

圖片描述

圖片左邊或者右邊（自己發(fā)的消息）的部分隱藏，只顯示尖角部分

回答

編輯回答

柒喵

那是一個(gè)倒三角寫(xiě)成的，三角的顏色與消息的背景色相同，三角定位到邊線(xiàn)的正中間，就有那個(gè)效果了。http://www.layui.com/demo/lay...，這里面就有例子。

2017年3月26日 23:00

編輯回答

伐木累

一分為二，不就好了

2018年6月26日 06:56

編輯回答

毀與悔

一般是hack ::before 前面寫(xiě)一個(gè)三角代替，
最好還是用svg處理

2018年4月7日 11:26

編輯回答

解夏

應(yīng)該是找個(gè)尖角的svg，然后用clip-path才對(duì)吧，上面的都是 hack

2017年9月19日 01:13

編輯回答

不舍棄

還是用svg吧~

2018年2月21日 22:23

編輯回答

愿如初

這些挺不錯(cuò)的純CSS實(shí)現(xiàn)的
可以參考：
http://blog.csdn.net/marSmile...
https://www.cnblogs.com/zczha...
希望對(duì)你有所幫助

2017年10月11日 23:39

編輯回答

大濕胸

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>無(wú)標(biāo)題文檔</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>

2017年7月23日 12:09