带缺口的盒子

假设您正在尝试实现一种设计效果，其中元素的角被切掉了。也许你是 《太空堡垒卡拉狄加》的粉丝？或者也许您只是喜欢这种不寻常的效果，因为它避免了看起来像一个典型的矩形。

我怀疑有很多方法可以做到这一点。当然，您可以使用 多个背景 在角落放置图像。您也可以在背景中使用一个灵活的 SVG 形状。我敢肯定，还有一种奇特的方法可以使用渐变来实现它。

但是，我喜欢简单地拿起剪刀剪掉那些该死的角的想法。多亏了 clip-path，我们实际上可以做到这一点。我们可以使用 polygon() 函数，提供 X 和 Y 坐标的列表，并剪掉它们外部的内容。

看看如果我们列出三个点会发生什么：中间顶部、底部右侧、底部左侧。

.module {
  clip-path: 
    polygon(
      50% 0,
      100% 100%,
      0 100%
    );
}

让我们不要只列出三个点，而是列出带缺口角所需的全部八个点。我们可以使用像素，但这很危险。我们可能并不真正知道元素的像素宽度或高度。即使我们知道，它也可能发生变化。所以，这里使用百分比表示

.module {
  clip-path: 
    polygon(
      0% 5%,     /* top left */
      5% 0%,     /* top left */
      95% 0%,    /* top right */
      100% 5%,   /* top right */
      100% 95%,  /* bottom right */
      95% 100%,  /* bottom right */
      5% 100%,   /* bottom left */
      0 95%      /* bottom left */
    );
}

这可以，但是请注意缺口没有形成完美的 45 度角。这是因为元素本身不是正方形。元素越不像正方形，情况就越糟糕。

我们可以使用 calc() 函数来解决这个问题。我们必须在需要的时候使用百分比，但只需从百分比中减去即可获得所需的位置和角度。

.module {
  clip-path: 
    polygon(
      0% 20px,                 /* top left */
      20px 0%,                 /* top left */
      calc(100% - 20px) 0%,    /* top right */
      100% 20px,               /* top right */
      100% calc(100% - 20px),  /* bottom right */
      calc(100% - 20px) 100%,  /* bottom right */
      20px 100%,               /* bottom left */
      0 calc(100% - 20px)      /* bottom left */
    );
}

你知道吗？这个数字被重复了太多次，我们不妨把它定义为一个 变量。如果以后需要更新这个数字，我们只需要更改一次，而不是所有这些单独的时间。

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

发布吧。

查看 CodePen 上 Chris Coyier 的 带缺口的盒子 (@chriscoyier)。

这可能不言而喻，但请确保您有足够的填充来处理裁剪。如果您想变得更花哨，您也可以在填充值中使用 CSS 变量，这样您剪掉的越多，填充就越多。