如何使用 CSS 定义可动画化的角的形状？

在CSS中实现元素角的形状变化动画，传统的border-radius只能处理圆角场景，无法适配尖角、斜边角等复杂形状。我们可以通过clip-path属性定义元素的裁剪路径，精确控制每个角的形状，同时支持动画过渡效果。

使用 clip-path 定义角的形状

clip-path属性可以裁剪元素的可显示区域，通过polygon函数可以定义多边形的顶点，从而精确控制元素四个角的形状。每个顶点的坐标用百分比表示，分别对应元素左上角(0% 0%)、右上角(100% 0%)、右下角(100% 100%)、左下角(0% 100%)四个基准点。

比如要定义一个左上角为尖角、其余为直角的形状，可以设置如下路径：

/* 左上角尖角顶点在(0% 20%)，其余角保持默认直角 */
.element {
  clip-path: polygon(0% 20%, 100% 0%, 100% 100%, 0% 100%);
}

实现角的形状动画

clip-path的属性值支持CSS动画，只需要定义不同状态下的路径，再通过transition或animation实现过渡即可。需要注意的是，动画前后polygon的顶点数量必须一致，否则无法触发平滑过渡。

下面是一个左上角从直角变为尖角再变回直角的动画示例：

/* 基础样式 */
.box {
  width: 200px;
  height: 200px;
  background-color: #4a90e2;
  /* 初始状态：四个角都是直角 */
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  transition: clip-path 0.5s ease-in-out;
}

/* 鼠标悬浮时左上角变为尖角 */
.box:hover {
  clip-path: polygon(0% 30%, 100% 0%, 100% 100%, 0% 100%);
}

多角同时变化的动画示例

如果需要同时改变多个角的形状，只需要调整对应顶点的坐标即可。下面的示例实现了四个角同时向内收缩形成尖角的动画：

.multi-corner {
  width: 300px;
  height: 300px;
  background-color: #e74c3c;
  /* 初始状态：四个直角 */
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  animation: corner-change 2s infinite alternate;
}

@keyframes corner-change {
  /* 动画结束状态：四个角都变为尖角 */
  100% {
    clip-path: polygon(0% 20%, 100% 20%, 100% 80%, 0% 80%);
  }
}

使用 mask 属性实现替代方案

除了clip-path，我们还可以使用mask属性配合径向渐变或线性渐变实现角的形状定义和动画。mask的本质是给元素添加遮罩，透明区域会被隐藏，不透明区域会显示。

比如用径向渐变实现圆角动画的示例：

.mask-box {
  width: 200px;
  height: 200px;
  background-color: #2ecc71;
  /* 初始遮罩：四个角都是直角 */
  mask: radial-gradient(circle at 0% 0%, transparent 0%, black 0%) 0% 0% / 20px 20px no-repeat,
        radial-gradient(circle at 100% 0%, transparent 0%, black 0%) 100% 0% / 20px 20px no-repeat,
        radial-gradient(circle at 100% 100%, transparent 0%, black 0%) 100% 100% / 20px 20px no-repeat,
        radial-gradient(circle at 0% 100%, transparent 0%, black 0%) 0% 100% / 20px 20px no-repeat,
        linear-gradient(black, black);
  transition: mask 0.5s ease;
}

.mask-box:hover {
  /* 悬浮时四个角变为半径20px的圆角 */
  mask: radial-gradient(circle at 0% 0%, transparent 20px, black 20px) 0% 0% / 40px 40px no-repeat,
        radial-gradient(circle at 100% 0%, transparent 20px, black 20px) 100% 0% / 40px 40px no-repeat,
        radial-gradient(circle at 100% 100%, transparent 20px, black 20px) 100% 100% / 40px 40px no-repeat,
        radial-gradient(circle at 0% 100%, transparent 20px, black 20px) 0% 100% / 40px 40px no-repeat,
        linear-gradient(black, black);
}

两种方案对比

实际开发中可以根据项目兼容性要求和角的形状复杂度选择合适的方案，clip-path更适合复杂角的形状动画，mask更适合需要兼容旧浏览器的场景。

CSScorner_shape动画clip_path修改时间：2026-07-10 06:24:29