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

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

相关推荐
abcy071213几秒前
sqlalchemy 原生sql判断条件是否为空,为空则跳过
开发语言·python
用户938515635073 分钟前
从模块化到 Prompt 工程:我用 Node.js + LLM 复刻了传统 NLP 的流程
javascript·人工智能·node.js
YAwu113 分钟前
手写一个符合 Promise/A+ 规范的 Promise(附完整代码)
前端·javascript
bonechips4 分钟前
用 Prompt 做 NLP:从零搭建一个情感分析与信息提取系统
javascript
暗不需求5 分钟前
从路虎汽车小程序看微信小程序开发的最佳实践
前端·javascript·微信小程序
东风破_5 分钟前
用原型实现一个队列:JS 面向对象的"不走寻常路"
javascript
.千余6 分钟前
【C++】深挖STL list底层:解迭代器与节点存储逻辑
开发语言·c++·笔记·学习·其他
淡水瑜8 分钟前
C# 实操
开发语言·c#
向日的葵0068 分钟前
vue路由(二)
前端·javascript·vue.js·vue
雪落漂泊9 分钟前
C++ 继承与多态(上)
开发语言·c++