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

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

相关推荐
zhangzeyuaaa1 分钟前
Python getter/setter 正确用法详解
开发语言·python
南境十里·墨染春水9 分钟前
C++ 笔记 深赋值 浅赋值(面向对象)
开发语言·jvm·c++·笔记
Shaoxi Zhang14 分钟前
pm2运行项目实践记录(通过ecosystem.config.js配置并自动运行)
javascript·python·pycharm
Jinuss17 分钟前
源码分析之React中useRef解析
前端·javascript·react.js
cch891819 分钟前
css 样式说明,在页面布局开发中,样式表用于控制组件的尺寸、间距、边框及背景等视觉表现
前端·javascript·html
Lyyaoo.21 分钟前
【JAVA基础面经】JAVA的面向对象特性
java·开发语言·windows
晨枫阳25 分钟前
前端项目部署与问题解决
javascript·vue.js·ecmascript
小温冲冲32 分钟前
Qt WindowContainer 完整实战示例:QWidget 嵌入 QML
开发语言·数据库·qt
熙街丶一人37 分钟前
css 图片未加载时默认高度,加载后随图片高度
前端·javascript·css
紫_龙39 分钟前
最新版vue3+TypeScript开发入门到实战教程之Pinia详解
前端·javascript·typescript