css3 clip-path剪切图片

大致看了一下,反正以后用到就慢慢调吧

剪切四个角

clip-path: polygon(14px 0, calc(100% - 14px) 0,

100% 14px, 100% calc(100% - 14px),

calc(100% - 14px) 100%, 14px 100%,

0 calc(100% - 14px), 0 14px);

三角形

clip-path: polygon(50% 0,0 100%, 100% 100%);

矩行

clip-path:inset(10px)

括号内的值类似于margin、padding值的写法,可以写一个值,也可以写多个值。

相关推荐
31535669135 分钟前
一文带你了解二维码扫码的全部用途
前端·后端
七月shi人12 分钟前
用claude3.7,不到1天写了一个工具小程序(11个工具6个游戏)
前端·小程序·ai编程
Billy Qin20 分钟前
Rollup详解
前端·javascript·rollup
夜寒花碎33 分钟前
前端自动化测试一jest基础使用
前端·单元测试·jest
小徐_233337 分钟前
uni-app工程实战:基于vue-i18n和i18n-ally的国际化方案
前端·微信小程序·uni-app
前端小菜鸟一枚s40 分钟前
`ConstantPositionProperty` 的使用与应用
前端·javascript·cesium
JohnsonXin40 分钟前
怎么使用vue3实现一个优雅的不定高虚拟列表
前端·javascript·css·html5
东望41 分钟前
写代码不规范,同事两行泪 😭(工程化如何让团队协作更高效)
javascript·前端工程化
用户8377014088141 分钟前
前端实现个人信息脱敏(手机号、身份证号、姓名、邮箱)JavaScript代码示例
javascript
17Knight43 分钟前
我的个性化 VSCode
前端