技术栈

clip-path实现图片边角的裁剪

savealllive2024-08-23 12:05
复制代码
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

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

上一篇:【计算机组成原理】三、存储系统:4.高速缓冲存储器(Cache)(主存映射(全相联映射、直接映射 、组相联映射)、替换算法、Cache写策略)
下一篇:docker的安装+docker镜像的基本操作
相关推荐
秋秋小事
4 分钟前
React Hooks useContext
前端·javascript·react.js
ST.J
9 分钟前
前端笔记2025
前端·javascript·css·vue.js·笔记
拉不动的猪
10 分钟前
回顾vue中的Props与Attrs
前端·javascript·面试
耶啵奶膘
1 小时前
uni-app头像叠加显示
开发语言·javascript·uni-app
chéng ௹
1 小时前
uniapp 封装uni.showToast提示
前端·javascript·uni-app
看海天一色听风起雨落
1 小时前
Python学习之装饰器
开发语言·python·学习
Want595
1 小时前
C/C++圣诞树①
c语言·开发语言·c++
生擒小朵拉
1 小时前
STM32添加库函数
java·javascript·stm32
老赵的博客
1 小时前
c++ 杂记
开发语言·c++
jimmy.hua
1 小时前
[C++刷怪笼]:set/map--优质且易操作的容器
开发语言·c++
热门推荐
01UV安装并设置国内源022025 年高教社杯全国大学生数学建模竞赛C 题 NIPT 的时点选择与胎儿的异常判定 完整成品思路模型代码分享,全网首发高质量!!!032025年数学建模国赛C题超详细解题思路04A股预测还能更准?开源大模型Kronos带你跑通预测+回测全流程05不再让Windows更新!&Edge游戏助手卸载及关闭自动更新06KGG转MP3工具|非KGM文件|解密音频07UV 工具安装与国内镜像源配置指南08Linux下V2Ray安装配置指南09教你如何认证 Gemini 教育优惠的二次验证,薅个 1年的 Gemini Pro 会员10突破百度网盘的下载限速,两种方法教会你【超详细】