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值的写法,可以写一个值,也可以写多个值。

相关推荐
AAA阿giao9 小时前
从“拼字符串”到“魔法响应”:一场数据驱动页面的奇幻进化之旅
前端·javascript·vue.js
donecoding9 小时前
解决 npm 发布 403 错误:全局配置 NPM Automation Token 完整指南
前端·javascript
潜水豆9 小时前
浅记录一下专家体系
前端
梨子同志9 小时前
Node.js 事件循环(Event Loop)
前端
北慕阳9 小时前
背诵-----------------------------
java·服务器·前端
JS_GGbond10 小时前
Vue3 组件入门:像搭乐高一样玩转前端!
前端·vue.js
SakuraOnTheWay10 小时前
拆解一个由 setTimeout 引发的“页面假死”悬案
前端·javascript
渔_10 小时前
【已解决】uni-textarea 无法绑定 v-model / 数据不回显?换原生 textarea 一招搞定!
前端
小胖霞10 小时前
vite+ts+monorepo从0搭建vue3组件库(二):项目搭建
前端·vue.js·前端工程化
JS_GGbond10 小时前
Vue中级冒险:3-4周成为组件沟通大师 🚀
前端·vue.js