当前位置：首页 > CSS

css缺口制作

2026-04-01 13:04:41CSS

使用 CSS 制作缺口效果

方法一：利用 border 和 clip-path

通过设置边框和裁剪路径实现缺口效果：

.element {
  width: 200px;
  height: 100px;
  background: #3498db;
  position: relative;
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 80%,
    80% 80%,
    80% 100%,
    20% 100%,
    20% 80%,
    0% 80%
  );
}

方法二：伪元素叠加

css缺口制作

使用伪元素创建缺口形状：

.element {
  width: 200px;
  height: 100px;
  background: #3498db;
  position: relative;
  overflow: hidden;
}

.element::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 20%;
  width: 60%;
  height: 20px;
  background: white;
  transform: rotate(45deg);
}

方法三：SVG 背景

css缺口制作

通过 SVG 背景图像实现自定义缺口：

.element {
  width: 200px;
  height: 100px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100"><path d="M0,0 L200,0 L200,80 L160,80 L160,100 L40,100 L40,80 L0,80 Z" fill="%233498db"/></svg>');
}

响应式缺口设计

结合媒体查询调整缺口尺寸：

.element {
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% calc(100% - 20px),
    calc(100% - 20px) calc(100% - 20px),
    calc(100% - 20px) 100%,
    20px 100%,
    20px calc(100% - 20px),
    0% calc(100% - 20px)
  );
}

@media (max-width: 600px) {
  .element {
    clip-path: polygon(
      0% 0%,
      100% 0%,
      100% calc(100% - 10px),
      calc(100% - 10px) calc(100% - 10px),
      calc(100% - 10px) 100%,
      10px 100%,
      10px calc(100% - 10px),
      0% calc(100% - 10px)
    );
  }
}

动画缺口效果

为缺口添加悬停动画：

.element {
  transition: clip-path 0.3s ease;
}

.element:hover {
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% calc(100% - 30px),
    calc(100% - 30px) calc(100% - 30px),
    calc(100% - 30px) 100%,
    30px 100%,
    30px calc(100% - 30px),
    0% calc(100% - 30px)
  );
}

以上方法可根据具体需求选择，clip-path 方案在现代浏览器中兼容性较好，伪元素方案则对旧版浏览器更友好。SVG 方案适合需要复杂缺口形状的场景。