Добавление тени к трапеции

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

на основе Метод двойной коробки css-tricks Вы можете "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 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 в нужной форме и цвете, а затем добавить тень ксам элемент.

Вот еще информация о SVG .

Надеюсь, это поможет.

Answer 4

Вместо 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