带有单独线性渐变的截角 Div答案

【问题标题】：Clipped Corner Div with a Separate Linear Gradient带有单独线性渐变的截角 Div
【发布时间】：2018-09-18 18:44:04
【问题描述】：

我宁愿使用纯 CSS 来实现这一点，而不是依赖 SVG。

有许多关于使用一系列线性渐变的剪裁边缘的教程，即

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 不兼容。

【问题讨论】：

标签： css background gradient

【解决方案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>

【讨论】：

这适用于除 Internet Explorer 之外的所有应用程序。有什么解决方案可以支持吗？我将编辑原始问题。
@TimWillis imo，这太漂亮了，不会破坏体验。你不想要 SVG，但你想要 100% 的浏览器支持......必须付出一些。
谢谢@SergChernata！我添加了一个更完整的答案，感谢您的帮助。我赞成你的回答，但我还没有太大的影响力。

【解决方案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。

编辑：多花点时间，没有理由不能在包含 linear-gradient 的 div 前后创建伪元素以添加“切边”外观。

请参阅下面的codepen here 或 CSS。

/*div and interior BG*/
div {
  width: 80%;
  height: 300px; /*Make sure your content has a height specified*/
  display: inline-block;
  background: linear-gradient(290deg, blue 50%, darkblue 50%);
  position: relative;
  margin-left: 10%;
}

/*Shared styles across pseudo elements*/
div:before, div:after {
  content: '';
  width: 20%;
  min-height: 300px; /*Fits psuedo element height to content*/
  position: absolute;
  display:inline-block;
}
/*Position and cuts for left side*/
div:before {
  left: -9.9%;
  background: linear-gradient(135deg, transparent 15px, darkblue 0) top left,
            linear-gradient(45deg, transparent 15px, darkblue 0) bottom left;
  background-size: 100% 51%;
  background-repeat: no-repeat;
}
/*Position and cuts for left right*/
div:after {
  right: -9.9%;
  background:
            linear-gradient(-135deg, transparent 15px, blue 0) top right,
            linear-gradient(-45deg, transparent 15px, blue 0) bottom right;
  background-size: 100% 51%;
  background-repeat: no-repeat;
}

【讨论】：