为梯形添加阴影答案

【问题标题】：Adding shadow to trapezoid为梯形添加阴影
【发布时间】：2019-01-30 08:54:57
【问题描述】：

首先，这个问题可能类似于this，但我的情况不同，所以它真的帮不了我。

梯形代码如下：

#light {
  /*setting the element*/
  border-bottom: 164px solid grey;
  border-left: 148px solid transparent;
  border-right: 165px solid transparent;
  height: 0;
  width: 80px;
}

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

澄清一下，我正在尝试添加阴影效果，类似于以下示例：

#bulb {
  /*setting the element*/
  background: grey;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  /*adding "light" (shadow)*/
  box-shadow: 0 0 100px 10px rgba(128, 128, 128, 0.5);
}

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

当我尝试添加常规 box-shadow: 时，我的梯形变成了带有白色部分的常规矩形。

【问题讨论】：

标签： html css css-shapes

【解决方案1】：

您可以使用drop-shadow 过滤器来代替box-shadow，例如

filter: drop-shadow(0 0 40px #222);

#light {
	/*setting the element*/
	border-bottom: 164px solid grey;
	border-left: 148px solid transparent;
	border-right: 165px solid transparent;
	height: 0;
	width: 80px;
    filter: drop-shadow(0 0 40px #222);

}

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

更多信息MDN

【讨论】：

感谢您的回答，会试一试:)

【解决方案2】：

我会使用具有模糊效果的伪元素以不同的方式创建形状：

#light {
  width:400px;
  height:160px;
  position:relative;
}
#light:before,
#light:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:
    /*triangle on the right*/
    linear-gradient(to top right,grey 49.5%,transparent 50%) right/150px 100%,
    /*triangle on the left*/
    linear-gradient(to top left, grey 49.5%,transparent 50%) left /150px 100%,
    /*rectangle at the center*/
    linear-gradient(grey,grey) center/100px 100%;
 background-repeat:no-repeat;
}
#light:before {
  filter:blur(20px);
}

<div id="light">

</div>

【讨论】：

我已经尝试过您的解决方案，它似乎与@fcalderan 给出的几乎相同，不同之处在于您的代码似乎比他的更复杂，但正如所说的实现非常相似的目标。感谢您的帮助。
@NewbieJ 这是给出不同答案的目的；）相同的输出不同的方法。

【解决方案3】：

基于css-tricks Double-Box Method你可以"have a container box with hidden overflow and another box inside it which is rotate and hangs out of it"

.light {
  width: 350px;
  height: 135px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 10px -17px rgba(0, 0, 0, 0.5);
}
.light:after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: #999;
  transform: rotate(45deg);
  top: 25px;
  left: 25px;
  box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5);
}

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

【讨论】：

已经尝试过你的代码，除非我做错了什么，否则梯形会收到阴影，但会产生某种黑点，留下可见的矩形形状，（如果我当然改变阴影的数量从你的“10px”到，让我们说“100px”。但是我非常感谢你的帮助。

【解决方案4】：

在您的示例中，您不能添加适当的盒子阴影，而不在每一侧都有这些白色部分。 这是因为 CSS 边框为灰色梯形 DIV 着色。

在上面的例子中，他们使用的是一个.SVG文件（图像），因为它是一个图像，它的原始形状是梯形，而不是像你这样的带白边的矩形。

您需要以所需的形状和颜色绘制 .svg，然后为元素本身添加阴影。

Here are more informations about SVG.

希望对你有帮助。

【讨论】：

我部分同意您的论点，但是，如果您查看链接上的第一个示例，您可以清楚地看到该人使用干净的 css 制作了形状，并且没有导入 SVG。此外，在这个问题上给出的答案证明你的说法有点不同。感谢您的回复 :)希望我没有听起来刺耳或任何东西
您好，很好。我从上面的答案中学到了一些东西，现在我知道 SVG 不需要为其添加阴影。祝你有美好的一天:)
同样@Alexis Philip