css - 尝试使用线性渐变创建 2 个切 Angular

Question

我能够使用以下方法在盒子的左下角完成一个小的切割:

background: linear-gradient(
  45deg,
  transparent 7px,
  $color--background 7px
);

但现在我正在尝试创建相同的东西，但这次在左上角和右上角切掉了 2 个 Angular 。我尝试这样做，认为它会切断左上角和左下角，但没有成功:

background: linear-gradient(
  45deg,
  transparent 7px,
  $color--background 7px
), linear-gradient(
  135deg,
  transparent 7px,
  $color--background 7px
);

任何帮助都将非常感谢。

Answer 1

考虑 background-size 和 background-position:

.box {
  background: 
   linear-gradient(-135deg, transparent 20px, red 0) right, 
   linear-gradient( 135deg, transparent 20px, red 0) left;
  background-size:51% 100%; /* width height */
  background-repeat:no-repeat;
  
  height:100px;
}

<div class="box">
</div>

或者像下面这样:

.box {
  background: 
   linear-gradient( 45deg,  transparent 20px, red 0) bottom, 
   linear-gradient( 135deg, transparent 20px, red 0) top;
  background-size:100% 51%;
  background-repeat:no-repeat;
  
  height:100px;
}

<div class="box">
</div>

对于更奇特的方式，您可以考虑使用 mask 并拥有任何类型的背景

.box {
  -webkit-mask: 
   linear-gradient( 45deg,  transparent 20px, red 0) bottom, 
   linear-gradient( 135deg, transparent 20px, red 0) top;
  -webkit-mask-size:100% 51%;
  -webkit-mask-repeat:no-repeat;
  
  mask: 
   linear-gradient( 45deg,  transparent 20px, red 0) bottom, 
   linear-gradient( 135deg, transparent 20px, red 0) top;
  mask-size:100% 51%;
  mask-repeat:no-repeat;
  
  background:linear-gradient(25deg,red,yellow,purple,blue);
  height:100px;
}

.box2 {
  -webkit-mask: 
   linear-gradient(-135deg, transparent 20px, red 0) right, 
   linear-gradient( 135deg, transparent 20px, red 0) left;
  -webkit-mask-size:51% 100%;
  -webkit-mask-repeat:no-repeat;
  
  mask: 
   linear-gradient(-135deg, transparent 20px, red 0) right, 
   linear-gradient( 135deg, transparent 20px, red 0) left;
  mask-size:51% 100%;
  mask-repeat:no-repeat;
  
  background:linear-gradient(25deg,red,yellow,purple,blue);
  height:100px;
}

<div class="box">
</div>

<div class="box2">
</div>