带有单独线性渐变的削波角Div

Question

我希望不再使用SVG，而是希望使用纯CSS来实现。

在修剪边缘上有许多使用一系列线性梯度的教程，即

background: linear-gradient(135deg, transparent 15px, blue 0) top left,
            linear-gradient(-135deg, transparent 15px, blue 0) top right,
            linear-gradient(-45deg, transparent 15px, blue 0) bottom right,
            linear-gradient(45deg, transparent 15px, blue0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;

对角线的“线性梯度”也可以很容易地实现，即

background: linear-gradient(290deg, blue 50%, darkblue 50%);

有没有一种方法可以将这两种技术结合起来以获得类似下图所示的框？

编辑：Internet Explorer兼容性会很好。

-webkit-clip-path
clip-path

IE不符合我的知识。

Answer 1

您可以通过背景渐变定义一个透明角。但是，当您声明多个时，它们会覆盖上一条规则定义的透明度。本质上，它们彼此画画。

更好的解决方案是使用clip-path。对于简单形状，可以使用clippy。

body {
  background: black;
}

#gradients {
  width: 200px;
  height: 50px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0) 15px, rgba(255, 0, 0, 1) 0) top left, linear-gradient(-135deg, rgba(255, 255, 255, 0) 15px, rgba(255, 0, 0, 1) 0) top right, linear-gradient(-45deg, rgba(255, 255, 255, 0) 15px, rgba(255, 0, 0, 1) 0) bottom right, linear-gradient(45deg, rgba(255, 255, 255, 0) 15px, blue) bottom left;
}

#gradientsPaintover {
  margin: 30px 0 0 0;
  width: 200px;
  height: 50px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0) 15px, rgba(0, 255, 0, 0.4) 0) top left, linear-gradient(-135deg, rgba(255, 255, 255, 0) 15px, rgba(0, 0, 255, 1) 0) top right;
}


#clip {
  background: red;
  margin: 30px 0 0 0;
  width: 200px;
  height: 50px;
  -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
  clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}

<div id="gradients"></div>
<div id="gradientsPaintover"></div>
<div id="clip"></div>

Answer 2

Serg的回答有助于解决问题，但我想我会发布一个完整的解决方案。

background: linear-gradient(290deg, blue 50%, darkblue 50%);
-webkit-clip-path: polygon(5% 0, 95% 0, 100% 10%, 100% 90%, 95% 100%, 5% 100%, 0 90%, 0 10%);
clip-path: polygon(5% 0, 95% 0, 100% 10%, 100% 90%, 95% 100%, 5% 100%, 0 90%, 0 10%);

请注意，这在IE中根本不起作用，在这种情况下，您应该使用SVG选项。

编辑：为此花费了更多时间，没有理由在包含div的{​​{1}}之前和之后都无法创建伪元素以添加“切割边缘”外观。

请参见下面的codepen here或CSS。

linear-gradient