Мне нужно создать треугольник с падающей тенью, используя простые html и css. Ответив на другой вопрос о stackoverflow, я смог создать треугольник со скошенными границами. Обычно я создаю одну сторону бокса с очень широкой рамкой, а соседнюю сторону - с широкой прозрачной рамкой:
div.triangle {
border-bottom : 60px solid transparent;
border-left : 60px solid black;
}
отлично работает, но когда я пытаюсь применить тень блока, тень идет по окружающему квадрату ... не треугольник:
div.triangle {
border-bottom : 60px solid transparent;
border-left : 60px solid black;
-webkit-box-shadow: 0 0 10px black;
}
Как получить треугольник, используя только css / html с тенью?