Css 尝试使用线性渐变创建两个截断角

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

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

但现在我试图创造同样的东西，但这次在左上角和右上角有两个切掉的角。我试着这样做，认为这样会切断左上角和左下角，但没有成功：

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

---

任何帮助都将非常感谢。

考虑

背景尺寸
和
背景位置
：


.box{
背景：
线性梯度（-135度，透明20px，红色0）右侧，
线性梯度（135度，透明20px，红色0）左；
背景尺寸：51%100%；/*宽度高度*/
背景重复：无重复；
高度：100px；
}
考虑
背景尺寸
和
背景位置
：


.box{
背景：
线性梯度（-135度，透明20px，红色0）右侧，
线性梯度（135度，透明20px，红色0）左；
背景尺寸：51%100%；/*宽度高度*/
背景重复：无重复；
高度：100px；
}

因为你制作的每个背景都覆盖了整个盒子，导致相邻的角落被填满。@Laif ahh好吧，这很有意义，至少给了我一个正确方向的提示，因为你制作的每个背景都覆盖了整个盒子，导致相邻的角被填满。@Laif ah好的，这很有意义，至少给了我一个正确方向的提示很好，它工作了！我得弄清楚背景尺寸是如何和为什么用这个的。感谢you@user1189352默认情况下，渐变将覆盖所有区域（100%100%），因此如果您不想简单地使用重叠渐变，则需要指定一个大小如果我想将其更改为我最初想要的左上角和右上角，会发生什么？我正试图摆弄你的回答，但这很难，哈哈。谢谢你regardless@user1189352我回答的第一个片段是做右上角和右上角left@user1189352试试这个：最好改变每个渐变的颜色，这样你就可以理解这个技巧了。像图像一样看到它们，这将很容易奏效！我得弄清楚背景尺寸是如何和为什么用这个的。感谢you@user1189352默认情况下，渐变将覆盖所有区域（100%100%），因此如果您不想简单地使用重叠渐变，则需要指定一个大小如果我想将其更改为我最初想要的左上角和右上角，会发生什么？我正试图摆弄你的回答，但这很难，哈哈。谢谢你regardless@user1189352我回答的第一个片段是做右上角和右上角left@user1189352试试这个：最好改变每个渐变的颜色，这样你就可以理解这个技巧了。像图像一样看到它们，这将很容易