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 分钟前
74_SysTick滴答定时器中断
c语言·开发语言·人工智能·单片机·嵌入式硬件·算法·学习方法
科芯创展17 分钟前
XZ4058B/C,20V,外置MOS,8.4V/8.7V开关充电芯片 宽范围电源电压:8.9V~20V-(电池充电电压:8.4V/8.7V)
c语言·开发语言
AI玫瑰助手24 分钟前
Python流程控制:break与continue语句的区别与应用
开发语言·python·信息可视化
棉猴25 分钟前
python海龟绘图之画布与窗口
javascript·python·html·setup·turtle·海龟绘图·screensize
AI_paid_community38 分钟前
25k Star 登顶 GitHub:这个专门吃 K 线图长大的 AI,让我意识到之前三年都在裸奔
javascript·claude
largecode1 小时前
如何让电话显示店名?来电显示店铺名称,提升有效接通率
java·开发语言·spring·百度·学习方法·业界资讯·twitter
xuhaoyu_cpp_java1 小时前
SpringMVC学习(五)
java·开发语言·经验分享·笔记·学习·spring
Aurorar0rua1 小时前
CS50 x 2024 Notes C -11
c语言·开发语言·学习方法
Dlrb12111 小时前
C语言-指针
c语言·开发语言