当前位置：首页 > CSS

css缺口制作

2026-02-13 04:28:43CSS

使用 border 属性创建缺口

通过设置边框的透明部分和实色部分，可以模拟缺口效果。例如，制作一个四角有缺口的矩形：

.element {
  width: 200px;
  height: 100px;
  border: 2px solid transparent;
  border-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%) 2;
}

使用 clip-path 实现复杂缺口

clip-path 属性允许用多边形或 SVG 路径裁剪元素。制作三角形缺口：

css缺口制作

.element {
  clip-path: polygon(
    0% 10%,  /* 左上顶点 */
    10% 10%, /* 右上缺口 */
    10% 0%,  /* 缺口顶点 */
    90% 0%,  /* 下一个缺口 */
    90% 10%,
    100% 10%,
    100% 90%,
    90% 90%,
    90% 100%,
    10% 100%,
    10% 90%,
    0% 90%
  );
}

伪元素叠加技术

通过 ::before 或 ::after 伪元素创建视觉上的缺口：

css缺口制作

.element {
  position: relative;
  background: #3498db;
}
.element::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: white;
  transform: rotate(45deg) translate(50%, -50%);
}

SVG 遮罩方案

使用 SVG 创建精确控制的缺口形状：

.element {
  -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M0 0 H100 V100 H0 Z M20 20 V80 H80 V20 Z" fill="white"/></svg>') center/contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M0 0 H100 V100 H0 Z M20 20 V80 H80 V20 Z" fill="white"/></svg>') center/contain no-repeat;
}

渐变背景模拟缺口

利用 background 的渐变特性创建视觉缺口：

.element {
  background: 
    linear-gradient(135deg, transparent 15px, #f06 15px) top left,
    linear-gradient(-135deg, transparent 15px, #f06 15px) top right,
    linear-gradient(-45deg, transparent 15px, #f06 15px) bottom right,
    linear-gradient(45deg, transparent 15px, #f06 15px) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

每种方法适用于不同场景：border方案适合简单几何缺口，clip-path适合复杂形状，伪元素适合动态效果，SVG适合高精度控制，渐变方案适合纯色背景的装饰性缺口。