V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
retrocode
V2EX  ›  问与答

[花活讨论]不虑兼容性的话, 纯 css 实现切角+四角边框样式的最好方法吗? 我现在除了直接丢图片和用 dom 遮挡想不出比较好的实现方式了

  •  
  •   retrocode · 2022-06-27 14:06:22 +08:00 · 1137 次点击
    这是一个创建于 878 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Imgur

    类似这种切角的同时,四角只有四角有边框,

    我目前的实现思路是用 clip-path + dorp-shadow 实现切角和边框, 但是无法实现只有四角有边框, 无奈的用相对坐标通过其他元素把多余的边框遮挡住, 但是感觉这样的写法有点邪道

    在不考虑兼容性的情况下, 使用有更好的实现方式呢?

    我尝试的方案:

    https://code.juejin.cn/pen/7113708345646645278

    8 条回复    2022-06-27 18:54:25 +08:00
    murmur
        1
    murmur  
       2022-06-27 14:11:29 +08:00
    也可以考虑 svg 贴图,这么简单的路径 svg 也可以实现,再复杂就直接贴大图,各种 dashboard 常用,尤其是国产各种 dashboard 、大屏,一水的全贴图,谁有闲心去做 css
    retrocode
        2
    retrocode  
    OP
       2022-06-27 14:40:49 +08:00
    @murmur #1 是的现在这种一般都是无脑上图片, 最简单粗暴
    snoopyhai
        3
    snoopyhai  
       2022-06-27 14:43:35 +08:00
    从使用者角度考虑. 1. 看起来正常, 不别扭. 2. 加载速度可接受.
    除了这些, 可能没人在乎你是如何实现的.

    所以. 从开发角度看. 1. 看起来正常, 不别扭 2. 加载速度可接受. 3. 源码易维护. 即可.

    再看 op 给的设计稿.
    简单切 3 片即可: 头 半透明背景 尾,
    或者头尾用一个图, 反转一下. 半透明的背景用 rgba 来处理.

    为什么不建议 css 实现. 折线还好说. 折线对应的那个角落是透明的. 这一点有点麻烦.

    为什么不建议 svg 实现. 同 css 实现, 折线都好说. 麻烦的是背景透明的角.
    snoopyhai
        4
    snoopyhai  
       2022-06-27 14:47:34 +08:00
    感谢提供源码, 又学了一个: clip-path
    retrocode
        5
    retrocode  
    OP
       2022-06-27 17:01:06 +08:00
    @snoopyhai #4 的确是直接上设计图最好, 我就是无聊整花活, 哈哈, 最重要一点用图片, 样式问题,直接甩锅美工会比较轻松=.=
    xiadd
        6
    xiadd  
       2022-06-27 17:15:10 +08:00 via iPhone
    像你这个最好的解决方案是 border-image
    coolzjy
        7
    coolzjy  
       2022-06-27 18:50:23 +08:00
    border-image
    rabbbit
        8
    rabbbit  
       2022-06-27 18:54:25 +08:00
    border-image-slice
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1249 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 17:57 · PVG 01:57 · LAX 09:57 · JFK 12:57
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.