带有斜阴影的 CSS 响应式横幅答案

【问题标题】：CSS Responsive banner with oblique shadow带有斜阴影的 CSS 响应式横幅
【发布时间】：2018-12-06 10:46:36
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

我不认为这个问题是链接问题的副本，因为链接问题没有解决盒子阴影问题。解决问题的方法是使用伪元素（: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;
查看这个方便的渐变生成器colorzilla.com/gradient-editor，它甚至有一些与您想要的非常相似的预设，它会为您提供大多数浏览器的代码

标签： html css

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

&lt;div id="container"&gt;&lt;/div&gt;

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

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

【讨论】：

这仅适用于某些解决方案，以使其具有响应性，我是否可以使用 @media screen and (max-width: xxpx) { ... } 编写案例？

【解决方案2】：

您可以在线性渐变中添加多个色标。使用两个颜色集。

使用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;
}

&lt;div class="canvas"&gt;&lt;div class="gradient-canvas"&gt;&lt;/div&gt;&lt;/div&gt;

【讨论】：

这里没有影子。为什么所有这些 div？
@TemaniAfif 倾斜的部分在中间。所以我正在使用另一个 div 在两侧创建偏移量
没必要，全宽 div 上的渐变就足够了，就像你在我的回答中看到的那样......你的影子会被破坏

【解决方案3】：

您可以尝试如下渐变：

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

【讨论】：