如何使用 CSS 创造任意形状的 div？clip-path、mask 与 border-radius 进阶技巧详解

在网页布局中，div 天生就是一个矩形块。很多人以为想做出圆形头像、三角形箭头、六边形徽章这类异形元素，必须请出图片或 SVG，其实纯 CSS 就能做到。核心技术有三把钥匙：clip-path 负责矢量裁剪，mask 负责像素级遮罩，border-radius 配合 transform 负责圆角与变形。三者思路完全不同，适用场景也不同，下面逐一拆解。

一、clip-path：最直接的矢量裁剪方案

clip-path 的原理是定义一个裁剪区域，区域外的部分直接不渲染，不占视觉空间也不响应点击。它支持多种函数，最常用的是 polygon()、circle() 和 ellipse()。

polygon 接收一组坐标点，坐标可以是百分比也可以是 px，浏览器会按顺序连线围成闭合多边形。比如做一个向上的三角形，只需要三个点：左下、右下、顶部中点：

.triangle-up {
  width: 100px;
  height: 100px;
  background: #3498db;
  /* 三个顶点：左下、右下、顶中 */
  clip-path: polygon(0 100%, 100% 100%, 50% 0);
}

多边形的点数没有限制，星形、箭头、对话气泡都可以手工计算坐标。如果觉得手算麻烦，可以借助 clippy 这类在线工具可视化拖拽生成。除了多边形，圆形和椭圆写起来更简单，例如 clip-path: circle(50% at 50% 50%) 表示以元素中心为圆心裁出一个圆。

clip-path 最大的优势是可以做形变动画。当两个 polygon 状态的点数相同时，浏览器会对每个点做插值过渡，直接给元素加 transition 就能看到平滑变形效果：

.morph {
  width: 120px;
  height: 120px;
  background: #e74c3c;
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
  transition: clip-path 0.6s ease;
}
.morph:hover {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

需要注意的一点是，clip-path 只能做“硬边”裁剪，边缘是锐利的，无法直接产生羽化或半透明的渐隐效果，这类需求要交给 mask。

二、mask 遮罩：像素级别的形状控制

mask 的思路和 clip-path 相反：它不裁掉区域，而是用一张图（或渐变）的 alpha 通道决定元素每个像素的透明度。遮罩图中不透明的地方元素可见，透明的地方元素消失，半透明的地方元素半透明。目前标准写法是 mask-image，Chrome、Firefox、Safari 均已支持，旧版 WebKit 内核需要加 -webkit-mask-image 前缀。

最经典的用法是渐变遮罩，比如让一张图片底部自然渐隐：

.fade-image {
  width: 400px;
  height: 260px;
  background: url('banner.jpg') center/cover;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

mask 还支持 mask-repeat、mask-size、mask-position 这一组属性，语义和 background 系列完全一致。利用 repeat 可以做出很有意思的效果，比如优惠券边缘的锯齿：

.coupon {
  width: 320px;
  height: 120px;
  background: #ff6b6b;
  /* 顶部和底部各铺一排半圆，模拟撕票锯齿 */
  -webkit-mask: radial-gradient(circle 6px at 6px 0, transparent 98%, #000) 0 0/12px 12px repeat-x,
               radial-gradient(circle 6px at 6px 12px, transparent 98%, #000) 0 100%/12px 12px repeat-x;
  mask: radial-gradient(circle 6px at 6px 0, transparent 98%, #000) 0 0/12px 12px repeat-x,
        radial-gradient(circle 6px at 6px 12px, transparent 98%, #000) 0 100%/12px 12px repeat-x;
}

和 clip-path 相比，mask 的开销更高，因为浏览器要逐像素计算 alpha 混合，元素面积很大时要留意性能。但它的表达能力也更强：渐隐、羽化、重复纹理、基于图片的复杂镂空，这些 clip-path 都做不到。两者也可以叠加使用，先 clip 出大轮廓再用 mask 做细节渐隐。

三、border-radius 与 transform 组合拳

border-radius 是最古老的形状方案，很多人只知道它能把矩形变成圆，但它其实远比想象中强大。首先，它是支持斜杠语法的，斜杠前是水平半径，斜杠后是垂直半径，两组可以不相等，从而做出椭圆角：

/* 水平半径 50%，垂直半径 30%，得到一个横向椭圆 */
.ellipse {
  width: 200px;
  height: 100px;
  background: #2ecc71;
  border-radius: 50% / 30%;
}

更进阶的玩法是每个角分别写两个值，最多可以写八个数值，配合百分比可以捏出叶子、水滴这类曲线形状。例如一片叶子的轮廓：

.leaf {
  width: 120px;
  height: 120px;
  background: #27ae60;
  /* 两个角是尖的，两个角拉出大弧度 */
  border-radius: 0 100% 0 100%;
  transform: rotate(45deg);
}

border-radius 作用于边框和背景，元素依然占据原来的盒子空间，事件点击区域也还是那个被圆角“削”过的区域，这一点和 clip-path 类似。它的优势在于兼容性极好、性能开销几乎为零，而且不会像 clip-path 一样在某些场景触发图层重绘，适合大面积、需要频繁动画的元素。

四、三种方案的选型与实战建议

选型的核心逻辑是：规则圆角用 border-radius，多边形硬边用 clip-path，需要渐变边缘、镂空纹理或复杂图片蒙版时用 mask。三者在事件命中区域上表现一致，都被裁剪掉的部分不响应鼠标事件，这一点对可点击的异形按钮很重要。

再补充两个实战技巧。第一，做波浪形分隔线时，不必用 mask，用一段重复的 radial-gradient 背景配合 overflow hidden 往往更省事；第二，clip-path 的 polygon 动画要求前后状态点数一致，设计形变时提前规划好顶点数量，否则过渡会直接跳变。

浏览器兼容方面，clip-path 的 basic shape 函数在主流浏览器中均已支持多年，mask 在 2023 年后也完成了标准化，只需保留 -webkit- 前缀兜底即可安心上线。对于必须兼容老旧内核的项目，可以用 SVG 作为降级方案，因为 clip-path 和 mask 都支持引用 SVG 中定义的形状。

掌握这三把钥匙之后，大部分异形 UI 都不再需要切图。先用 border-radius 解决简单曲线，再用 polygon 精确切割轮廓，最后用 mask 处理那些“边缘不能太硬”的细腻效果，层层递进，任意形状的 div 就在你手中了。

clip-pathCSS maskborder-radius修改时间：2026-09-13 22:17:03