[花活讨论]不虑兼容性的话, 纯 css 实现切角+四角边框样式的最好方法吗? 我现在除了直接丢图片和用 dom 遮挡想不出比较好的实现方式了
cvooc · Jun 27, 2022 · 1683 viewsThis topic created in 1402 days ago, the information mentioned may be changed or developed.
类似这种切角的同时,四角只有四角有边框,
我目前的实现思路是用 clip-path + dorp-shadow 实现切角和边框, 但是无法实现只有四角有边框, 无奈的用相对坐标通过其他元素把多余的边框遮挡住, 但是感觉这样的写法有点邪道
在不考虑兼容性的情况下, 使用有更好的实现方式呢?
我尝试的方案:
 |
1
murmur Jun 27, 2022
也可以考虑 svg 贴图，这么简单的路径 svg 也可以实现，再复杂就直接贴大图，各种 dashboard 常用，尤其是国产各种 dashboard 、大屏，一水的全贴图，谁有闲心去做 css
|
 |
3
snoopyhai Jun 27, 2022
从使用者角度考虑. 1. 看起来正常, 不别扭. 2. 加载速度可接受.
除了这些, 可能没人在乎你是如何实现的. 所以. 从开发角度看. 1. 看起来正常, 不别扭 2. 加载速度可接受. 3. 源码易维护. 即可. 再看 op 给的设计稿. 简单切 3 片即可: 头 半透明背景 尾, 或者头尾用一个图, 反转一下. 半透明的背景用 rgba 来处理. 为什么不建议 css 实现. 折线还好说. 折线对应的那个角落是透明的. 这一点有点麻烦. 为什么不建议 svg 实现. 同 css 实现, 折线都好说. 麻烦的是背景透明的角. |
|
4
snoopyhai Jun 27, 2022
感谢提供源码, 又学了一个: clip-path
|
 |
6
xiadd Jun 27, 2022 via iPhone
像你这个最好的解决方案是 border-image
|
 |
7
coolzjy Jun 27, 2022
border-image
|
 |
8
rabbbit Jun 27, 2022
border-image-slice
|
Select Language