CSS 怎么写出对话气泡的小尖角？像 iMessage 那样的气泡尖角。

[islujw]

用 CSS 写对话气泡，其中小尖角希望和 iMessage 一样，然而似乎有些困难，网上也都是微信那种尖角。

大家有什么建议嘛……

[mringg]

http://www.cssarrowplease.com 给你

[adspe]

和 CSS tooltip 一个思路

[Bardon]

伪类是一个思路

[bojackhorseman]

伪元素:before，:after 写个三角形然后位置调调调😂

[islujw]

@bojackhorseman 那个三角形是镰刀状的……不知道怎么写 $_$

[islujw]

@mringg 谢谢！问题是 iMessage 气泡的尖角是不规则的镰刀状，这个比较难搞……

[gongpeione]

上个图看看是什么样的

[learnshare]

http://blog.csdn.net/sdlyhjq/article/details/8292753 ?

[geelaw]

贴图呗，伪元素 content 可以是图

[islujw]

@gongpeione 官网的图片是这样的： https://images.apple.com/cn/ios/ios-10/overview/bubbleeffect/startframe_large_2x.jpg

[islujw]

@geelaw 这样，那也可以是 svg 吧？

[Tonni]

https://codepen.io/samuelkraft/pen/Farhl

[aleen42]

用 border 這個三角形出來

[islujw]

@Tonni 非常感谢，已经成功！只是有一个细节希望能继续完善：iMessage 的蓝色是全屏范围渐变的，我将颜色定义为：
background-image: linear-gradient(to bottom, #5ac8fa, #0b93f6);
background-attachment:fixed;
达成效果。
但小尾巴是 border 拼出来的，border 怎样才能支持类似「 background-attachment:fixed;」的设定，让渐变在全屏幕范围，而不是仅仅是单个内？

[islujw]

@aleen42 嗯，做到了。但 border 的渐变填充能否达成类似 background-attachment:fixed; 的效果？也就是在全屏幕范围内的渐变，而不局限在单个元素内。要和气泡本身保持一致。

[islujw]

@Tonni 如果能将 border 和主体部分连接到一起应该是最好的，因为如果消息是图片，整个部分都被图片填充，包括小尾巴。

[geelaw]

假设你的画布不是透明，那么没问题。

https://jsfiddle.net/ghLhf10m/

[geelaw]

上个图，感觉自己棒棒哒

[islujw]

@geelaw 谢谢 Gee Law 热情创作 ^ ^ 搞定了～ 蓝色小尾巴 border 定义颜色为 transparent 即可让 background-image 可见～开心！

[islujw]

@Tonni 感谢，已搞定。蓝色小尾巴 border 定义颜色为 transparent 即可让 background-image 渐变可见。