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

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

相关推荐
冴羽1 天前
涨见识了,Error.cause 让 JavaScript 错误调试更轻松
前端·javascript·node.js
m***D2861 天前
JavaScript在Node.js中的内存管理
开发语言·javascript·node.js
我叫张小白。1 天前
JavaScript现代语法梳理:ES6+核心特性详解
开发语言·javascript·typescript·es6
啃火龙果的兔子1 天前
react-i18next+i18next-icu使用详解
前端·javascript·react.js
1024小神1 天前
Electron实现多tab页案例,BrowserView/iframe/webview不同方式的区别
前端·javascript·electron
-森屿安年-1 天前
LeetCode 283. 移动零
开发语言·c++·算法·leetcode
U***e631 天前
Vue自然语言
前端·javascript·vue.js
寻找华年的锦瑟1 天前
Qt-FFmpeg案例(0基础,包含环境配置)
开发语言·qt·ffmpeg
拉不动的猪1 天前
Vue 跨组件通信底层:provide/inject 原理与实战指南
前端·javascript·面试
tanxiaomi1 天前
Spring、Spring MVC 和 Spring Boot ,mybatis 相关面试题
java·开发语言·mybatis