тень от квадрата в форме треугольника для создания шевронного элемента

Question

Я пытаюсь создать группу дивов в форме шеврона, и наткнулся на эту статью, где лента имеет форму внутреннего треугольника.http://css -tricks.com / snippets / css / ribbon /

Я пытался добавить внешнюю границу, которая бы следовала за треугольником, чтобы добиться эффекта, который я ищубез необходимости использовать изображения.

К сожалению, когда я попытался добавить тень от ящика, у меня получилась квадратная тень вокруг div, а не тень вокруг треугольной части.

Есть предложения о том, как этого добиться?

Answer 1

Я не думаю, что в настоящее время существует какое-либо простое решение для создания теней CSS форм, отличных от прямоугольников и прямоугольников со скругленными углами (используя border-radius).Но я думаю, что возможность (хотя и более сложная) будет использовать вращение преобразования CSS3 вместе с тенью блока.Вы можете выбрать некоторые методы здесь , которые, возможно, вы можете изменить в соответствии со своими потребностями.