具有倾斜阴影的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>

- LoreSchaeffer

---

我认为这个问题不是链接问题的重复，因为链接问题没有解决box-shadow问题。解决您的问题的方法是使用伪元素(:before或:after)代替您的#triangle-topleft div，在容器上设置position:relative;，然后将此CSS应用于您的伪元素。`box-shadow: 0 0 20px 0px rgba(0,0,0,0.75); position: absolute; width: 250px; height: 100px; background: #2196f3; transform: skew(-45deg); left: -50px;` - Jake

检查这个方便的渐变生成器http://www.colorzilla.com/gradient-editor/，它甚至有一些预设，非常类似于你想要的，并且会为大多数浏览器提供代码。 - arieljuod

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/

- elveti

---

这仅适用于某些分辨率，要使其响应式，我需要编写带有@media screen and (max-width: xxpx) { ... }的情况吗？ - LoreSchaeffer

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>

如果想要对角线的结果，只需将deg更换为to bottom right：

#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>

- Temani Afif

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>

- Sumit Ridhal

---

这里没有阴影。为什么要用这些div？ - Temani Afif

@TemaniAfif 倾斜的部分位于中间。因此，我正在使用另一个 div 在两侧创建偏移量。 - Sumit Ridhal

在像我回答中所示的全宽div上，只需要渐变就足够了...你的阴影会被破坏。 - Temani Afif