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 渐变可见。

[geelaw]

@islujw 喵，我的方法不需要用 border，我用 before 和 after 创造两个圆角矩形剪切得到的小尾巴。

[islujw]

@geelaw 嗯，明白～竟然还为气泡间的时间间距测量了精确的像素(｡ì _ í｡)

[lxy42]

学习了

[joyqi]

其实如果你不想用弧度的话，完全可以用 before 和 after 的伪类画一个出来，不需要图片

比如这样
https://jigu.im/hello

[geelaw]

@islujw 大小是胡写的，看起来像而已。

[ffkjjj]

@Tonni 请问 CSS 代码中 :before 前面的 & 有什么作用？

[Tonni]

@ffkjjj 这是 SCSS 的写法： http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector

[islujw]

@Tonni 基于那份代码，渐变效果已在 Mac Safari 上成功实现。但 iOS Safari 不支持 background-attachment: fixed; 特性，导致渐变色被固定在每个元素，不能根据位置而变化，这个还有解决的希望嘛……

[islujw]

@geelaw iOS Safari 不支持 background-attachment: fixed; 特性……

[geelaw]

@islujw 啊那你可以选择在 iOS Safari 上不使用渐变，还可以 fallback 到纯色

[islujw]

@geelaw Hmm …没有什么曲线救国的办法的话，嗯……似乎也只能这样了。不知道 Android 是否支持。

[ffkjjj]

@Tonni 了解了，非常感谢

[islujw]

@geelaw 怎么让 iOS 和 macOS 的 Safari 区别用色呢？没成功诶，iOS 上总是以预先分布好的渐变示人……

[geelaw]

@islujw 被你坑了。iOS 10 的 Safari 命名可以得到正确的效果。如下三张图是从顶部滚到底部的结果（增加了很多条信息、改变了渐变色便于观察）

[islujw]

@geelaw 「 iOS 10 的 Safari 命名」是什么意思？

[geelaw]

@islujw *明明

[islujw]

@geelaw 1. 你是如何在手机上滚动这块页面的？我增加了对话、改变了颜色后，整个网页被撑高了，滑动是滑动整个网页，而非仅限于这个区块内。2. 我在自己网页上实现后，的确无法实现。3. 能搜出大量关于 iOS Safari 不支持此特性的讨论。你截图中的是 iOS Safari 实现的还是那个网站给的运行环境实现的呢？

[geelaw]

@islujw 放进一个 div 里面，那个 div 设置高度和滚动条。

[islujw]

@geelaw 经过测试，在 JSFiddle 和自己的网页上，为区块设置固定高度和滚动条 {max-height: 300px; overflow: scroll; } 可以让 iOS Safari 将背景固定住，达到效果。但从浏览体验出发，不可以这么设定。然而，在页面自然滚动状态下，就无法达成效果了。为了弄清楚背景图究竟是如何定位的，将颜色替换为图片，发现是以整个页面长度（而非屏幕高度，亦非第一个和最后一个气泡的高度差）为填充高度。

[geelaw]

@islujw 那你可以把整个页面套进一个 div 里面，让这个 div 具有 100vh、100vw 和滚动条，并禁止 body、html 之滚动条

[islujw]

@geelaw 最后权衡了一下，还是决定让宽度小于等于 1024px 的浏览器使用纯色。页面滑动的顺畅度还是首要考虑的。不管怎样，还是谢谢啦…(｡ì _ í｡)

[e8c47a0d]

形状比较复杂的，建议用 inline svg

[islujw]

@e8c47a0d 已经用 border 写出来了。现在的问题是移动端的 Safari 不支持背景 fixed。当然还有滑动时的气泡缓冲效果，不过这个可有可无～