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

[Mithgol]

Вот ещё чуть более 180 штук таких цветов.

[Sytrus]

В «Метод 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);
}

[Softlink]

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

[AntonDiaz]

Ну там как бы еще куча всяких нюансов:

• Это не настоящий элемент, то есть внутри него нельзя поместить текст (хотя решаемо экстра-разметкой, но это не будет на 100% надежно)
• ClearType-сглаживание в крупных кеглях смотрится так себе, так что и края этого треугольника будут не очень
• Может так случиться, что этого символа не окажется в шрифтовом файле пользователя
• …

[ivvi]

15 строк кода на то, чтобы показать один жалкий треугольник. Мда…
В последнее время мне всё чаще кажется, что веб-строительство явно развивается не в том направлении.

[derSmoll]

Почему же жалкий? Вполне даже симпатичный. Для жалкого хватит и пять строк :)

[ivvi]

Знаете, мне даже ради наипрекраснейшего треугольника/квадратика/кружка жалко пяти строк кода =)))

[Athari]

Вёрстка без картинок — это бесплатное снижение нагрузки на сервер.

[ivvi]

Я не против вёрстки без картинок.
Я против того, чтобы картинка заменялась пятнадцатью (или около того) строками кода.

[Dmitry_f]

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

[philpirj]

Да, теперь больше не нужно лезть в википедию в раздел «все символы Unicode».

[TNK]

here comes problem