clip-path实现图片边角的裁剪

复制代码
img {
        clip-path: polygon(
          0 7px,
          7px 0,
          calc(100% - 20px) 0,
          100% 20px,
          100% 100%,
          16px 100%,
          0 calc(100% - 16px)
        );
      }

每一个逗号隔开的就是路径坐标 左上角的两个点 0 7px ,7px 0

右上角 calc(100% - 20px) 0,100% 20px

相当于通过这些点练成的线的圈起来的部分就是剩下的图片

相关推荐
幻境如梦丶皆为虚3 小时前
从零写一个 DSH 插件:在左侧菜单栏加一个「测试」
开发语言·javascript·ecmascript
吹什么轩3 小时前
constexpr 完全指南:从 const 的两种含义,到编译期计算的四次演进
java·前端·javascript
LabVIEW开发3 小时前
LabVIEW 局部变量与数据流:这道 CLAD 题为什么答案是 Undefined
java·开发语言·labview
路溪非溪3 小时前
C++标准库之智能指针
linux·开发语言·c++
衍生星球4 小时前
【Java 语言】— 面向对象:构造方法(无参、有参构造)
java·开发语言
yuniko-n4 小时前
【JVM】对象内存布局
java·开发语言·jvm
何中应4 小时前
【Go-1】变量&常量定义
开发语言·后端·golang
CarIise4 小时前
Spring 框架AOP与 XML 基础
java·开发语言
geovindu5 小时前
rust:N-Barrier Pattern
开发语言·后端·设计模式·rust·屏障模式·并发型模式
AI宇宙狂想家5 小时前
开源 AI 视频工具进化史:从难用到好用,OpenMontage 改了什么
开发语言·前端·人工智能·开源·ai创业·openmontage