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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 2741 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

大家有什么建议嘛……

气泡

小尖角

CSS

iMessage

43 条回复 • 2017-07-16 17:03:50 +08:00

mringg

2017-05-23 20:58:02 +08:00 via iPhone

http://www.cssarrowplease.com 给你

adspe

2017-05-23 21:12:22 +08:00

和 CSS tooltip 一个思路

Bardon

2017-05-23 21:20:17 +08:00 via Android

伪类是一个思路

bojackhorseman

2017-05-23 21:34:43 +08:00 via Android

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

islujw

2017-05-23 21:48:15 +08:00

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

islujw

2017-05-23 21:51:04 +08:00

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

gongpeione

2017-05-23 21:51:46 +08:00

上个图看看是什么样的

learnshare

2017-05-23 21:51:49 +08:00

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

geelaw

2017-05-23 21:52:24 +08:00 via iPhone

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

islujw

2017-05-23 22:12:12 +08:00

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

islujw

2017-05-23 22:15:55 +08:00

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

Tonni

2017-05-23 22:59:18 +08:00

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

aleen42

2017-05-24 01:12:15 +08:00 via Android

用 border 這個三角形出來

islujw

2017-05-24 03:06:54 +08:00

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

islujw

2017-05-24 03:08:16 +08:00

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

islujw

2017-05-24 03:27:43 +08:00

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

geelaw

2017-05-24 04:36:05 +08:00

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

https://jsfiddle.net/ghLhf10m/

geelaw

2017-05-24 04:39:35 +08:00

上个图，感觉自己棒棒哒

islujw

2017-05-24 08:12:26 +08:00

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

islujw

2017-05-24 08:13:11 +08:00

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

geelaw

2017-05-24 08:23:36 +08:00

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

islujw

2017-05-24 09:06:38 +08:00

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

lxy42

2017-05-24 09:57:35 +08:00

学习了

joyqi

2017-05-24 11:00:04 +08:00

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

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

geelaw

2017-05-24 11:34:12 +08:00

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

ffkjjj

2017-05-24 14:41:10 +08:00 via iPhone

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

Tonni

2017-05-24 15:09:53 +08:00

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

islujw

2017-05-24 17:20:09 +08:00

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

islujw

2017-05-24 17:20:23 +08:00

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

geelaw

2017-05-24 17:38:31 +08:00 via iPhone

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

islujw

2017-05-24 23:53:01 +08:00

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

ffkjjj

2017-05-26 08:21:41 +08:00 via iPhone

@Tonni 了解了，非常感谢

islujw

2017-05-26 15:38:05 +08:00

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

geelaw

2017-05-26 19:53:57 +08:00

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

islujw

2017-05-27 02:00:32 +08:00

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

geelaw

2017-05-27 02:14:34 +08:00 via iPhone

@islujw *明明

islujw

2017-05-28 02:11:35 +08:00 via iPhone

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

geelaw

2017-05-28 02:21:38 +08:00 via iPhone

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

islujw

2017-05-28 15:45:56 +08:00

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

geelaw

2017-05-28 22:34:18 +08:00 via iPhone

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

islujw

2017-05-30 03:07:47 +08:00

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

e8c47a0d

2017-06-30 14:22:52 +08:00

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

islujw

2017-07-16 17:03:50 +08:00

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