《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;
}

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