CSS为有角度的div添加阴影答案

【问题标题】：CSS add shadow to angled divCSS为有角度的div添加阴影
【发布时间】：2019-02-22 21:46:05
【问题描述】：

我有以下代码：

.angled{
background-color: red;
height: 120px;
width: 100%;
  -webkit-clip-path: polygon(0 0, 1600px 0, 1600px 53%, 0 100%);
  clip-path: polygon(0 0, 1600px 0, 1600px 53%, 0 100%);
}

&lt;div class="angled"&gt;&lt;/div&gt;

我想在 div 的下边缘添加一个嵌入阴影。我怎样才能做到这一点？

【问题讨论】：

标签： html css shadow

【解决方案1】：

您可以将倾斜的元素视为可以轻松应用嵌入阴影的背景：

.angeled {
  position:relative;
  height: 120px;
  overflow:hidden;
  z-index:0;
}
.angeled::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:-20px;
  left:-20px;
  right:-20px;
  bottom:0;
  transform-origin:left;
  transform:skewY(-3deg);
  background:red;
  box-shadow:0 -2px 20px green inset
}

&lt;div class="angeled"&gt;&lt;/div&gt;

您也可以使用渐变来创建它：

.angeled {
  position:relative;
  height: 120px;
  background:
    linear-gradient(red,red) top/100% 50%,
    linear-gradient(to bottom right,
      red calc(50% - 15px),green calc(50% - 1px),
      transparent 50%) bottom left/150% 50%;
  background-repeat:no-repeat;
}

&lt;div class="angeled"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

您可以使用filter: drop-shadow。查看文档：https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow

.angeled{
background-color: red;
height: 120px;
width: 100%;
  -webkit-clip-path: polygon(0 0, 1600px 0, 1600px 53%, 0 100%);
  clip-path: polygon(0 0, 1600px 0, 1600px 53%, 0 100%);
 
}

.outer{
   filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.5));
}

<div class="outer">
<div class="angeled">
</div>
</div>

【讨论】：

您提到的解决方案不适用于我的情况，因为我需要将阴影应用于下边缘。
已更新。我想这就是你想要的。您需要 2 个元素来为多边形创建良好的阴影 :)
绕过阴影属性，玩得开心，如果你愿意，你可以应用内阴影！但我认为你在寻找外部阴影，我错了吗？
用隐藏的 div 溢出包裹它，添加一些填充底部，你就可以开始了！

【解决方案3】：

如果您不使用多边形:)

div.wrapper {
  overflow: hidden;
  height: 150px;
}

div.poly {
  width: 100%;
  height: 100px;
  background-color: #F00;
  box-shadow: 0px 5px 15px rgba(0,0,0,.6);
  transform: rotate(-2deg) scale(1.2);
  transform-origin: 30px 0px;
}

<div class='wrapper'>
  <div class='poly'>
  </div>
</div>

【讨论】：

通过一些修改，您可以使用一个元素来实现您的方法，jsfiddle.net/2stbL0dx。
:D 不错！我喜欢！