[花活讨论]不虑兼容性的话, 纯 css 实现切角+四角边框样式的最好方法吗? 我现在除了直接丢图片和用 dom 遮挡想不出比较好的实现方式了
retrocode · 2022-06-27 14:06:22 +08:00 · 1161 次点击这是一个创建于 906 天前的主题，其中的信息可能已经有所发展或是发生改变。
类似这种切角的同时,四角只有四角有边框,
我目前的实现思路是用 clip-path + dorp-shadow 实现切角和边框, 但是无法实现只有四角有边框, 无奈的用相对坐标通过其他元素把多余的边框遮挡住, 但是感觉这样的写法有点邪道
在不考虑兼容性的情况下, 使用有更好的实现方式呢?
我尝试的方案:
 |
1
murmur 2022-06-27 14:11:29 +08:00
也可以考虑 svg 贴图，这么简单的路径 svg 也可以实现，再复杂就直接贴大图，各种 dashboard 常用，尤其是国产各种 dashboard 、大屏，一水的全贴图，谁有闲心去做 css
|
 |
3
snoopyhai 2022-06-27 14:43:35 +08:00
从使用者角度考虑. 1. 看起来正常, 不别扭. 2. 加载速度可接受.
除了这些, 可能没人在乎你是如何实现的. 所以. 从开发角度看. 1. 看起来正常, 不别扭 2. 加载速度可接受. 3. 源码易维护. 即可. 再看 op 给的设计稿. 简单切 3 片即可: 头 半透明背景 尾, 或者头尾用一个图, 反转一下. 半透明的背景用 rgba 来处理. 为什么不建议 css 实现. 折线还好说. 折线对应的那个角落是透明的. 这一点有点麻烦. 为什么不建议 svg 实现. 同 css 实现, 折线都好说. 麻烦的是背景透明的角. |
|
4
snoopyhai 2022-06-27 14:47:34 +08:00
感谢提供源码, 又学了一个: clip-path
|
 |
5
retrocode OP @snoopyhai #4 的确是直接上设计图最好, 我就是无聊整花活, 哈哈, 最重要一点用图片, 样式问题,直接甩锅美工会比较轻松=.=
|
 |
6
xiadd 2022-06-27 17:15:10 +08:00 via iPhone
像你这个最好的解决方案是 border-image
|
 |
7
coolzjy 2022-06-27 18:50:23 +08:00
border-image
|
 |
8
rabbbit 2022-06-27 18:54:25 +08:00
border-image-slice
|
Select Language