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

相关推荐
Hilaku5 分钟前
前端真的比后端简单吗?
前端·javascript·程序员
Canace8 分钟前
为了给视频里的人脸打码,我让 Claude 做了个 Skill
前端·人工智能
zhedream9 分钟前
a-select / a-input 自定义下拉、Vue2 Fragment ,以及 transfer-dom
前端·vue.js
无人生还10 分钟前
从 Vue3 到 React · 快速上手系列第 10 篇:路由
前端·vue.js·react.js
杉氧10 分钟前
跨平台持久化:Flutter 本地数据库的多线程安全与架构设计实践
android·前端·flutter
毅yi13 分钟前
里程碑1:实现elpis-core以及基于elpis-core的基础设置搭建
前端
FogLetter15 分钟前
进程VS线程:你的电脑到底是怎么同时干那么多活的?
前端·面试
rememberme00116 分钟前
华为云 CodeArts Pipeline前端 Vue 项目自动打包发布配置指南
前端·vue.js·华为云
默_笙22 分钟前
🍔 我用 React 写了一个 TodoList,终于搞懂了"状态该放谁家"
前端·javascript
FogLetter25 分钟前
我真的写了个“诈尸式”缓存组件:手撕React KeepAlive
前端·react.js·面试