CSS
Comments 13
+8
В «Метод 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);
}
+2
C unicode есть еще один нюанс. Нельзя применить тень с inset, т.к. в text-shadow этого параметра просто нет, а внутренняя тень иногда нужна.
+1
Ну там как бы еще куча всяких нюансов:
  • Это не настоящий элемент, то есть внутри него нельзя поместить текст (хотя решаемо экстра-разметкой, но это не будет на 100% надежно)
  • ClearType-сглаживание в крупных кеглях смотрится так себе, так что и края этого треугольника будут не очень
  • Может так случиться, что этого символа не окажется в шрифтовом файле пользователя
-1
15 строк кода на то, чтобы показать один жалкий треугольник. Мда…
В последнее время мне всё чаще кажется, что веб-строительство явно развивается не в том направлении.
0
Знаете, мне даже ради наипрекраснейшего треугольника/квадратика/кружка жалко пяти строк кода =)))
+2
Вёрстка без картинок — это бесплатное снижение нагрузки на сервер.
0
Я не против вёрстки без картинок.
Я против того, чтобы картинка заменялась пятнадцатью (или около того) строками кода.
+1
Да, теперь больше не нужно лезть в википедию в раздел «все символы Unicode».
Only those users with full accounts are able to leave comments. , please.