Что лучше использовать — CSS, img, SVG?
По нынешним временам один из лучших вариантов для реализации простой геометрической фигуры (или сочетания нескольких простых фигур) использовать 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.
Я бы сделал css, но выбор за Вами, всё зависит от случая, Кто мешает сделать 3 варианта и посмотреть какой лучше подходит под Ваши задачи?
Оказывается, еще остались люди путающие Java u javaScript.