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

[retrocode]

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

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

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

我尝试的方案:

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

[murmur]

也可以考虑 svg 贴图，这么简单的路径 svg 也可以实现，再复杂就直接贴大图，各种 dashboard 常用，尤其是国产各种 dashboard 、大屏，一水的全贴图，谁有闲心去做 css

[retrocode]

@murmur #1 是的现在这种一般都是无脑上图片, 最简单粗暴

[snoopyhai]

从使用者角度考虑. 1. 看起来正常, 不别扭. 2. 加载速度可接受.
除了这些, 可能没人在乎你是如何实现的.

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

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

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

为什么不建议 svg 实现. 同 css 实现, 折线都好说. 麻烦的是背景透明的角.

[snoopyhai]

感谢提供源码, 又学了一个: clip-path

[retrocode]

@snoopyhai #4 的确是直接上设计图最好, 我就是无聊整花活, 哈哈, 最重要一点用图片, 样式问题,直接甩锅美工会比较轻松=.=

[xiadd]

像你这个最好的解决方案是 border-image

[coolzjy]

border-image

[rabbbit]

border-image-slice