给梯形添加阴影

Question

首先，这个问题可能与类似，但我的情况不同，所以不能真正帮助我。

梯形代码如下：

#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

您可以使用 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);

}

<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 边框着色了灰色梯形 DIV。

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

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

Here are more informations about SVG.

希望对您有所帮助。

Answer 4

基于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>

给梯形添加阴影

Adding shadow to trapezoid

html

css

css-shapes