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

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

相关推荐
Brilliant Nemo7 分钟前
Vue2项目中使用videojs播放mp4视频
开发语言·前端·javascript
TNTLWT26 分钟前
Qt控件:交互控件
开发语言·qt
量化金策28 分钟前
震荡指标工具
开发语言
北漂老男孩31 分钟前
ChromeDriver进程泄漏问题分析与最佳实践解决方案
开发语言·爬虫
酷爱码32 分钟前
Linux实现临时RAM登录的方法汇总
linux·前端·javascript
李迟35 分钟前
Golang实践录:在go中使用curl实现https请求
开发语言·golang·https
Wannaer1 小时前
从 Vue3 回望 Vue2:性能优化内建化——从黑盒优化到可控编译
javascript·vue.js·性能优化
运维-大白同学2 小时前
go-数据库基本操作
开发语言·数据库·golang
yyywoaini~2 小时前
wordcount程序
前端·javascript·ajax
动感光博2 小时前
Unity(URP渲染管线)的后处理、动画制作、虚拟相机(Virtual Camera)
开发语言·人工智能·计算机视觉·unity·c#·游戏引擎