CSS shape()函数

最近的chrome blog又更新了，里面提到了一个shape()函数，体验了一下，好用，但是有一定的上手成本～

blog原文👉developer.chrome.com/blog/css-sh…

该方法主要是应用于针对clip-path上，可以实现兼具响应式的同时可以支持非多边形状。

clip-path

clip-path 是一个 CSS 属性，用于定义一个可视区域，元素的内容将被限制在这个区域内。常见的剪裁形状包括：圆形、椭圆、多边形、SVG 路径

👇下面的动图为多边形生成网址，bennettfeely.com/clippy

下面分别举例用polygon和path，来一起回顾一下clip-path。预览链接🔗

/* 对话框 polygon */
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
/* 流线 path */
clip-path: path("M 0 20 C 25 0 75 40 100 20 V 80 C 75 100 25 60 0 80 z");

path和polygon优缺点对比

方法	优势	缺陷
polygon()	✅百分比坐标响应式	❌仅支持直线多边形
svg path()	✅支持复杂曲线路径	❌绝对单位无法自适应

shape()

现在shap()可以支持复杂曲线路径和响应式。除此之外，还允许混合单位（百分比、vw、calc等），支持CSS变量和数学函数动态调整路径。

方法	polygon()	path()	shape()
响应式支持	✅	❌	✅
曲线路径	❌	✅	✅
动态参数(CSS变量)	有限	❌	✅

工具🔧

在线工具，直接svg转shape，还支持直接上传svg文件 CSS clip-path path() to shape()函数转换工具

应用案例

动态参数

codepen.io/web-dot-dev…

各类形状

效果图	核心代码

基础语法

官方语法说明

，起始点；by，相对值； to：绝对值

数据说明（速记）：

关键词	说明	关键词	说明
from	起始点	line	线段
hline	水平线	vline	垂直线
curve	贝塞尔曲线	close	闭合标志