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

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

相关推荐
片酷6 分钟前
【Isaacsim&Isaaclab】安装教程
linux·开发语言·python
Magic@11 分钟前
Redis学习[1] ——基本概念和数据类型
linux·开发语言·数据库·c++·redis·学习
黑不溜秋的12 分钟前
C++ STL reduce 用法
开发语言·c++
倾听一世,繁花盛开12 分钟前
Java语言程序设计——篇十三(1)
java·开发语言·ide·eclipse
大腕先生14 分钟前
通用分页超详细介绍(附带源代码解析&页面展示效果)
xml·java·linux·服务器·开发语言·前端·idea
AIKZX14 分钟前
西门子博途 TIA Portal v18 中文版图文安装教程(超级详细)附下载链接
开发语言·c#·编辑器·idea
RunsenLIu15 分钟前
019 | backtrader回测布林带突破策略
开发语言·python
A_aspectJ18 分钟前
如何抓住Java开发岗的市场红利?从需求端反推学习路径
java·开发语言·职场和发展
睿智的海鸥19 分钟前
Markdown 语法大全详解
开发语言·前端·javascript·css·html
w_com.h19 分钟前
C语言中 栈、队列、双向链表
c语言·开发语言·链表