Что лучше использовать — CSS, img, SVG?

Question

[SkyWayx]

Здравствуйте, подскажите пожалуйста, необходимо сделать шапку из прямоугольного треугольника, через что будет лучше и корректней это реализовать? пробовал через img, мне кажется не удачный вариант, так как качество краёв картинки получалось прерывистом. Почитал про svg, как понял там рисуется линия, можно ли будет в таком случае к примеру полученный треугольник залить каким нито цветом и разместить на нём меню, и чтобы всё корректно работало? или делать это лучше через css посредством border? и если сделать через css, не будет ли невидимая область перекрывать контент, который находится под ней?

Answer 1

[Евгений Петров]

По нынешним временам один из лучших вариантов для реализации простой геометрической фигуры (или сочетания нескольких простых фигур) использовать SVG, либо трансформацию привычных HTML-элементов. Применять полученный код SVG возможно двумя путями:

Вставка SVG непосредственно в код
Позволит отслеживать события в Javascript (всевозможные click и пр.) и состояния в CSS (по типу :hover) для любой фигуры из набора. Оформление всех SVG-элементов (кроме ряда невизуальных) осуществляется в CSS. Это означает, что их можно анимировать средствами CSS.
Например, создал ради тренировки и примера codepen.io/cleric/pen/ktGfa.

SVG в качестве фона
С помощью data:uri используем код SVG, как будто указываем код картинки:

url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="координаты видимой области">код фигур</svg>')

Технически viewBox использовать необязательно — можно экспериментировать с background-size. Минус такого решения — анимация фигур не получится, только целиком контейнер, в котором стоит эта картинка. Ну и про отдельные события, возникающие в рамках контура фигур, также забываем.

Трансформация элементов
Есть вариант трансформации и обрезки обычных элементов с помощью transform и overflow. Например, как тут tympanus.net/Tutorials/CircularNavigation (несмотря на то, что код там избыточен и некорректная работа обеспечена исключительно усилиями автора этого сайта). Но тут вариантов куда как меньше и усилий потребуется выше крыши.

Update:
В другой теме Почему при использовании тега object к нему добавляется дочерний объект #document? есть пример с использованием SVG.

Answer 2

[A K]

Я бы сделал css, но выбор за Вами, всё зависит от случая, Кто мешает сделать 3 варианта и посмотреть какой лучше подходит под Ваши задачи?
Оказывается, еще остались люди путающие Java u javaScript.