Треугольники с тенью на CSS

color: #BADA55;

Хороший цвет, да =)

В «Метод Double-Box» вместе/вместо overflow: hidden; можно добавить clip: rect(auto, auto, auto, auto);, что «обрежет» нижнюю часть вмете с тенью (полезно, если например под треугольником будет еще какой-то блок с тенью), соответственно не забыть сменить position на absolute.

.triangle-with-shadow {
   width: 100px;
   height: 100px;
   position: absolute;
   /*overflow: hidden;*/
   box-shadow: 0 16px 10px -17px rgba(0,0,0,0.5);
   clip: rect(auto, auto, auto, auto);
}

C unicode есть еще один нюанс. Нельзя применить тень с inset, т.к. в text-shadow этого параметра просто нет, а внутренняя тень иногда нужна.

Сервис UTF-графики потрясающий. Спасибо за это.

here comes problem