具有斜影的CSS自适应横幅

Question

我正在尝试使用css为横幅创建背景，其中一侧有颜色，而另一侧有这样的45°切口

除了无法放置在正确位置的投影，我已经能够重新创建以上图像。 任何建议将不胜感激。

这是我的代码：

#container {
  height: 100px;
  width: 400px;
  overflow: hidden;
  background-color: #2962ff;
}

#triangle-topleft {
  width: 0;
  height: 0;
  border-top: 100px solid #2196f3;
  border-right: 400px solid transparent;
  -webkit-box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.75);
  box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.75);
}

<div id="container">
  <div id="triangle-topleft"></div>
</div>

Answer 1

带边框的CSS三角形技巧不能用于此目的，因为阴影仍将应用于框，而不仅是三角形。

您将必须创建一个伪元素，旋转它，然后对其施加阴影。

#container {
  position: relative;
  height: 200px;
  width: 200px;
  overflow: hidden;
  background-color: grey;
}

#container:before { 
  content: '';
  position: absolute;
  left: 20%;
  width: 100%; 
  height: 200%; 
  background-color: rgb(255, 255, 255); /* fallback */
  background-color: rgba(255, 255, 255, 0.5);
  top: 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow: inset 0 0 20px 10px #333;
}

<div id="container"></div>

基本上，您创建一个大于父对象的矩形，然后旋转它并应用阴影。您可以根据需要调整颜色和旋转度

演示：http://jsfiddle.net/b5TnZ/2032/

Answer 2

您可以尝试如下渐变：

#container {
  height: 150px;
  background:
    linear-gradient(135deg,#2962ff 49.8%,rgba(0,0,0,0.75) 50%, #2196f3 calc(50% + 10px));
  background-color:#2196f3;
}

<div id="container">
</div>

如果想要对角线结果，只需用to bottom right代替deg：

#container {
  height: 150px;
  width:50%;
  background:
    linear-gradient(to bottom right,#2962ff 50%,rgba(0,0,0,0.75) 50%, #2196f3 calc(50% + 10px));
  background-color:#2196f3;
}

<div id="container">
</div>

Answer 3

您可以在“线性渐变”中添加多个色标。使用两种颜色设置。

使用Shapy

生成的渐变

.canvas {
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    min-width: 100%;
}

.gradient-canvas {
    max-height: 100%;
    max-width: 100%;
    width: 100%; 
    height: 100%;
    background: linear-gradient(127deg, rgb(31, 163, 209) 0%, rgb(31, 163, 209) 50%, rgb(25, 64, 208) 0%, rgb(46, 101, 223) 52%) 50% 50% / 100% 100% no-repeat;
}

<div class="canvas"><div class="gradient-canvas"></div></div>