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

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

相关推荐
拉不动的猪11 分钟前
刷刷题16
前端·javascript·面试
kiramario13 分钟前
【结束】JS如何不通过input的onInputFileChange使用本地mp4文件并播放,nextjs下放入public文件的视频用video标签无法打开
开发语言·javascript·音视频
土豆儿@44 分钟前
java之泛型
java·开发语言
m0_748245341 小时前
python——Django 框架
开发语言·python·django
曼巴UE51 小时前
UE5.3 C++ TArray系列(一)
开发语言·c++·ue5
熬夜苦读学习1 小时前
Linux文件系统
linux·运维·服务器·开发语言·后端
菜鸟一枚在这2 小时前
深度解析建造者模式:复杂对象构建的优雅之道
java·开发语言·算法
化作繁星2 小时前
如何在 React 中测试高阶组件?
前端·javascript·react.js
Au_ust2 小时前
千峰React:函数组件使用(2)
前端·javascript·react.js
阿巴~阿巴~2 小时前
多源 BFS 算法详解:从原理到实现,高效解决多源最短路问题
开发语言·数据结构·c++·算法·宽度优先