《css揭秘》笔记（九），切角效果

切角效果

普通切角

假设我们只需要一个角被切掉的效果，以右下角为例。渐变可以接受一个角度（45deg）作为方向，而且色标的位置信息可以是绝对的长度值。因而我们可以用一个线性渐变就能完成右下角被切掉的效果，只需要把一个透明色标放在切角处。

.box1{
  width:200px;
  height: 100px;
  background: 
    linear-gradient(45deg, transparent 15px, #58a 0);
}

现在我们想要两个角被切掉的效果，以底部的两个角为例，只用一层渐变是不够的，还需要再加一层。

.box2{
  margin: 20px;
  width: 200px;
  height: 100px;
  background: 
    linear-gradient(-45deg, transparent 15px, #58a 0) right,
    linear-gradient(45deg, transparent 15px, #655 0) left;
}

然而这两层渐变会相互覆盖，最终得到的效果是：

所以我们用background-size使两层渐变分开。

.box3{
  margin: 20px;
  width: 200px;
  height: 100px;
  background: 
    linear-gradient(-45deg, transparent 15px, #58a 0) right,
    linear-gradient(45deg, transparent 15px, #655 0) left;
  background-size: 50% 100%;
}

然后这依然不是想要的效果，原因在于background默认是repeat的，需要把background-repeat设置成no-repeat。

.box4{
  margin: 20px;
  width: 200px;
  height: 100px;
  background:
    linear-gradient(-45deg, transparent 15px, #58a 0) right,
    linear-gradient(45deg, transparent 15px, #655 0) left;
  background-size: 50% 100%;
  background-repeat: no-repeat;
}

如果我们想要四个角都被切掉的效果，就可以用四层渐变：

.box5{
  margin: 20px;
  width: 200px;
  height: 100px;
  background: 
    linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,
    linear-gradient(45deg, transparent 15px, #58a 0) bottom left,
    linear-gradient(-135deg, transparent 15px, #58a 0) top right,
    linear-gradient(135deg, transparent 15px, #58a 0) top left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

弧形切角

上述渐变还有一个变种，可以用来创建弧形切角（也叫“内凹圆角”）。我们使用径向渐变来达到这种效果：

.box6{
  width: 200px;
  height: 100px;

  background: 
    radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
    radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
    radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
    radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
  background-size:50% 50%;
  background-repeat: no-repeat;
}

裁切路径方案

可以使用clip-path将一个元素切出20px大小（以水平方向度量）的斜面切角：

.box7{
  width: 200px;
  height: 100px;
  background-color: #58a;
  clip-path:
    polygon(
      20px 0, calc(100% - 20px) 0, 100% 20px,
      100% calc(100% - 20px), calc(100% - 20px) 100%,
      20px 100%, 0 calc(100% - 20px), 0 20px
    );
}

这个方案的不足在于，它会连容器中的文字一并裁切掉，如上图所示。

本篇文章是《css揭秘》一书的笔记，如果侵犯到了原作者的权益，请联系我删除。