首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
拉钩
V2EX  ›  CSS

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

  •  1
     
  •   islujw · 2017-05-23 20:45:03 +08:00 · 4249 次点击
    这是一个创建于 571 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    大家有什么建议嘛……

    43 回复  |  直到 2017-07-16 17:03:50 +08:00
        1
    mringg   2017-05-23 20:58:02 +08:00 via iPhone   ♥ 4
        2
    adspe   2017-05-23 21:12:22 +08:00
    和 CSS tooltip 一个思路
        3
    Bardon   2017-05-23 21:20:17 +08:00 via Android
    伪类是一个思路
        4
    bojackhorseman   2017-05-23 21:34:43 +08:00 via Android
    伪元素:before,:after 写个三角形然后位置调调调😂
        5
    islujw   2017-05-23 21:48:15 +08:00
    @bojackhorseman 那个三角形是镰刀状的……不知道怎么写 $_$
        6
    islujw   2017-05-23 21:51:04 +08:00
    @mringg 谢谢!问题是 iMessage 气泡的尖角是不规则的镰刀状,这个比较难搞……
        7
    gongpeione   2017-05-23 21:51:46 +08:00
    上个图看看是什么样的
        8
    learnshare   2017-05-23 21:51:49 +08:00
        9
    geelaw   2017-05-23 21:52:24 +08:00 via iPhone
    贴图呗,伪元素 content 可以是图
        10
    islujw   2017-05-23 22:12:12 +08:00
        11
    islujw   2017-05-23 22:15:55 +08:00
    @geelaw 这样,那也可以是 svg 吧?
        12
    Tonni   2017-05-23 22:59:18 +08:00   ♥ 4
        13
    aleen42   2017-05-24 01:12:15 +08:00 via Android
    用 border 這個三角形出來
        14
    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;」的设定,让渐变在全屏幕范围,而不是仅仅是单个内?
        15
    islujw   2017-05-24 03:08:16 +08:00
    @aleen42 嗯,做到了。但 border 的渐变填充能否达成类似 background-attachment:fixed; 的效果?也就是在全屏幕范围内的渐变,而不局限在单个元素内。要和气泡本身保持一致。
        16
    islujw   2017-05-24 03:27:43 +08:00
    @Tonni 如果能将 border 和主体部分连接到一起应该是最好的,因为如果消息是图片,整个部分都被图片填充,包括小尾巴。
        17
    geelaw   2017-05-24 04:36:05 +08:00   ♥ 1
    假设你的画布不是透明,那么没问题。

    https://jsfiddle.net/ghLhf10m/
        18
    geelaw   2017-05-24 04:39:35 +08:00   ♥ 2
    上个图,感觉自己棒棒哒

        19
    islujw   2017-05-24 08:12:26 +08:00
    @geelaw 谢谢 Gee Law 热情创作 ^ ^ 搞定了~ 蓝色小尾巴 border 定义颜色为 transparent 即可让 background-image 可见~开心!
        20
    islujw   2017-05-24 08:13:11 +08:00
    @Tonni 感谢,已搞定。蓝色小尾巴 border 定义颜色为 transparent 即可让 background-image 渐变可见。
        21
    geelaw   2017-05-24 08:23:36 +08:00
    @islujw 喵,我的方法不需要用 border,我用 before 和 after 创造两个圆角矩形剪切得到的小尾巴。
        22
    islujw   2017-05-24 09:06:38 +08:00
    @geelaw 嗯,明白~竟然还为气泡间的时间间距测量了精确的像素(。ì _ í。)
        23
    lxy42   2017-05-24 09:57:35 +08:00
    学习了
        24
    joyqi   2017-05-24 11:00:04 +08:00
    其实如果你不想用弧度的话,完全可以用 before 和 after 的伪类画一个出来,不需要图片

    比如这样
    https://jigu.im/hello
        25
    geelaw   2017-05-24 11:34:12 +08:00
    @islujw 大小是胡写的,看起来像而已。
        26
    ffkjjj   2017-05-24 14:41:10 +08:00 via iPhone
    @Tonni 请问 CSS 代码中 :before 前面的 & 有什么作用?
        27
    Tonni   2017-05-24 15:09:53 +08:00
        28
    islujw   2017-05-24 17:20:09 +08:00
    @Tonni 基于那份代码,渐变效果已在 Mac Safari 上成功实现。但 iOS Safari 不支持 background-attachment: fixed; 特性,导致渐变色被固定在每个元素,不能根据位置而变化,这个还有解决的希望嘛……
        29
    islujw   2017-05-24 17:20:23 +08:00
    @geelaw iOS Safari 不支持 background-attachment: fixed; 特性……
        30
    geelaw   2017-05-24 17:38:31 +08:00 via iPhone   ♥ 1
    @islujw 啊那你可以选择在 iOS Safari 上不使用渐变,还可以 fallback 到纯色
        31
    islujw   2017-05-24 23:53:01 +08:00
    @geelaw Hmm …没有什么曲线救国的办法的话,嗯……似乎也只能这样了。不知道 Android 是否支持。
        32
    ffkjjj   2017-05-26 08:21:41 +08:00 via iPhone
    @Tonni 了解了,非常感谢
        33
    islujw   2017-05-26 15:38:05 +08:00
    @geelaw 怎么让 iOS 和 macOS 的 Safari 区别用色呢?没成功诶,iOS 上总是以预先分布好的渐变示人……
        34
    geelaw   2017-05-26 19:53:57 +08:00
    @islujw 被你坑了。iOS 10 的 Safari 命名可以得到正确的效果。如下三张图是从顶部滚到底部的结果(增加了很多条信息、改变了渐变色便于观察)





        35
    islujw   2017-05-27 02:00:32 +08:00
    @geelaw 「 iOS 10 的 Safari 命名」是什么意思?
        36
    geelaw   2017-05-27 02:14:34 +08:00 via iPhone
    @islujw *明明
        37
    islujw   2017-05-28 02:11:35 +08:00 via iPhone
    @geelaw 1. 你是如何在手机上滚动这块页面的?我增加了对话、改变了颜色后,整个网页被撑高了,滑动是滑动整个网页,而非仅限于这个区块内。2. 我在自己网页上实现后,的确无法实现。3. 能搜出大量关于 iOS Safari 不支持此特性的讨论。你截图中的是 iOS Safari 实现的还是那个网站给的运行环境实现的呢?
        38
    geelaw   2017-05-28 02:21:38 +08:00 via iPhone
    @islujw 放进一个 div 里面,那个 div 设置高度和滚动条。
        39
    islujw   2017-05-28 15:45:56 +08:00
    @geelaw 经过测试,在 JSFiddle 和自己的网页上,为区块设置固定高度和滚动条 {max-height: 300px; overflow: scroll; } 可以让 iOS Safari 将背景固定住,达到效果。但从浏览体验出发,不可以这么设定。然而,在页面自然滚动状态下,就无法达成效果了。为了弄清楚背景图究竟是如何定位的,将颜色替换为图片,发现是以整个页面长度(而非屏幕高度,亦非第一个和最后一个气泡的高度差)为填充高度。
        40
    geelaw   2017-05-28 22:34:18 +08:00 via iPhone
    @islujw 那你可以把整个页面套进一个 div 里面,让这个 div 具有 100vh、100vw 和滚动条,并禁止 body、html 之滚动条
        41
    islujw   2017-05-30 03:07:47 +08:00
    @geelaw 最后权衡了一下,还是决定让宽度小于等于 1024px 的浏览器使用纯色。页面滑动的顺畅度还是首要考虑的。不管怎样,还是谢谢啦…(。ì _ í。)
        42
    e8c47a0d   2017-06-30 14:22:52 +08:00
    形状比较复杂的,建议用 inline svg
        43
    islujw   2017-07-16 17:03:50 +08:00
    @e8c47a0d 已经用 border 写出来了。现在的问题是移动端的 Safari 不支持背景 fixed。当然还有滑动时的气泡缓冲效果,不过这个可有可无~
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2166 人在线   最高记录 4019   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.1 · 21ms · UTC 10:27 · PVG 18:27 · LAX 02:27 · JFK 05:27
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1