类似这种切角的同时,四角只有四角有边框,
我目前的实现思路是用 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
|