Добавление тени к трапеции
Во-первых, этот вопрос может быть похож на это, но форма в моем случае другая, поэтому он не может мне помочь.
Код трапеции следующий:
#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:, моя трапеция становится обычным прямоугольником с белыми частями.
Ответы 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>Подробнее о МДН
Я бы создал форму по-другому, используя псевдоэлемент с эффектом размытия:
#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 это цель дать разные ответы;) один и тот же вывод разными методами.
В вашем примере вы не могу добавляете правильную тень блока, не имея этих белых частей с каждой стороны. Это связано с тем, что граница CSS окрашивает серую трапецию DIV.
В приведенном выше примере они используют .SVG-файл (изображение), поскольку это изображение, исходная форма которого — трапеция, а не прямоугольник с белой стороной, как у вас.
Вам нужно будет нарисовать .svg желаемой формы и цвета, а затем добавить тень к самому элементу.
Вот дополнительная информация о SVG.
Я надеюсь, что это помогает.
Я частично согласен с вашим аргументом, но если вы посмотрите на первый пример по ссылке, вы ясно увидите, что человек сделал форму, используя чистый css, и не было импортировано SVG. Кроме того, ответы, данные на этот вопрос, немного по-другому доказывают ваши утверждения. Спасибо за ответ :) P.S. надеюсь, я не звучал резко или что-то в этом роде
Здравствуйте, все отлично. Я кое-что узнал из ответа выше, теперь я знаю, что SVG не требуется, чтобы добавлять к нему тень. Хорошего дня :)
аналогично @Alexis Philip
на базе 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>попробовал ваш код, и если я не сделал что-то не так, трапеция получает тень вокруг, но создает какие-то черные пятна, оставляя видимую форму прямоугольника (если я, конечно, изменю количество теней с вашего "10px" на, давайте скажите "100px". Тем не менее, я ценю вашу помощь.
Спасибо за ответ, будем пробовать :)