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

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

相关推荐
樱花开了几轉7 分钟前
React中为甚么强调props的不可变性
前端·javascript·react.js
Brookty1 小时前
Java线程安全与中断机制详解
java·开发语言·后端·学习·java-ee
Mr...Gan1 小时前
VUE3(四)、组件通信
前端·javascript·vue.js
從南走到北2 小时前
JAVA东郊到家按摩服务同款同城家政服务按摩私教茶艺师服务系统小程序+公众号+APP+H5
android·java·开发语言·微信小程序·小程序
遇见尚硅谷2 小时前
C语言:20250728学习(指针)
c语言·开发语言·数据结构·c++·笔记·学习·算法
☆璇2 小时前
【C++】C/C++内存管理
c语言·开发语言·c++
愿你天黑有灯下雨有伞3 小时前
枚举策略模式实战:优雅消除支付场景的if-else
java·开发语言·策略模式
网络安全打工人3 小时前
CentOS7 安装 rust 1.82.0
开发语言·后端·rust
楚轩努力变强3 小时前
前端工程化常见问题总结
开发语言·前端·javascript·vue.js·visual studio code
梦想的初衷~3 小时前
MATLAB近红外光谱分析技术及实践技术应用
开发语言·支持向量机·matlab