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

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

相关推荐
bonechips18 分钟前
useRef + Web Worker:React 中的多线程计算
前端·javascript
渣波26 分钟前
从“迷路”到“瞬移”:彻底搞懂 React Router 的 `useLocation` 与 `useNavigate`
前端·javascript
橘子星27 分钟前
React Context + 自定义 Hooks:告别 Props 地狱,一行代码跨层级传数据
前端·javascript
触底反弹30 分钟前
🔥 别再只用 useRef 拿 DOM 了!这 5 个实战场景让你彻底理解它(附源码解析 + 面试题)
前端·javascript·react.js
小僧景贤31 分钟前
嵌入式C语言 第十一篇:成长路线|嵌入式C工程师完整进阶学习路径(从零到工程级落地|含周期+实战项目)
c语言·开发语言·学习
BreezeJiang32 分钟前
Web Worker 不负责渲染:React 中的线程分工与消息闭环
javascript·react.js
做前端的娜娜子33 分钟前
JavaScript 闭包
前端·javascript·掘金·金石计划
何时梦醒34 分钟前
🎯 从零彻底搞懂 React Context API —— 一篇带你穿越"组件树"的状态共享方案
前端·javascript·react.js
渣波35 分钟前
拒绝页面假死!React 并发编程实战:Web Worker + useRef 深度解析与高性能计算架构
前端·javascript
BreezeJiang36 分钟前
不要把 Context 当万能状态库:主题共享和鼠标 Hook 应该这样拆
javascript·react.js