为梯形添加阴影

Question

首先，这个问题可能与this类似，但在我的情况下，形状却有所不同，因此无法真正帮助我。

梯形代码如下：

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

<div id="light"></div>

为了澄清，我试图添加阴影效果，类似于以下示例：

#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);
}

<div id="bulb"></div>

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

Answer 1

例如，您可以使用box-shadow过滤器来代替drop-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);

}

<div id="light"></div>

有关MDN的更多信息

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

Answer 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);
}

<div class="light"></div>

Answer 4

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

在上面的示例中，他们使用的是 .SVG文件（图像），因为它是图像，所以它的原始形状是梯形，而不是像您一样带有白色边的矩形。

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

Here are more informations about SVG。

希望对您有帮助。