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

По нынешним временам один из лучших вариантов для реализации простой геометрической фигуры (или сочетания нескольких простых фигур) использовать 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: Почему происходит смещение изображения при line-height идентичной высоте блока? я уже показывал в картинке, как происходит центрирование.
Очень важным при центрировании мог бы стать font-size-adjust. Увы — его поддержка оставляет желать лучшего.

Поэтому остаются манипуляции с padding, маленьким line-height и рихтовка с помощью vertical-align в em.

Есть варианты с display вроде

display:inline-flex;
align-items:center;
justify-content:center;
line-height:1;

или

display:table-cell;
vertical-align:middle;
line-height:1;

Так и положено. Средствами CSS вы не сможете задать отступ для каждой перенесённой строки.
Как вариант — только скриптом, как в этой теме Как сделать такой бэкграунд для текста?
И вам не нужно скашивать элементы в начале и конце строк — то есть в решении упростятся стили.

Update: @DeLaVega продемонстрировал, что можно обойтись только средствами CSS.

При создании элементов (и атрибутов) в пространствах имён (это то, что указано в атрибуте xmlns) требуется вызов createElementNS с указанием этого самого пространства

var test = document.createElementNS('http://www.w3.org/1999/xhtml', 'i');

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

Напишите маленькую функцию (или прототип jQuery расширьте). Можете сделать её и немаленькой — с парсингом строки для выделения имени тэга и атрибутов.

$.extend($, {
	createNS: function (tag, ns) {
		return $(document.createElementNS(ns, tag));
	}
});

$(function () {
	$.createNS('i', 'http://www.w3.org/1999/xhtml')
		.text('added tag')
		.appendTo($('#parent'));
});

Update: причину глюка верно указал @SelenIT2 — заключите в CDATA свой скрипт. И вообще следуйте требованиям синтаксиса и структуры XML.

Тем не менее, вопрос о пространстве имён имеет значение при генерации элементов и атрибутов из пространства, отличающего от того, в котором находится глобальный контент (SVG, RDFa и т.п.).

Я выступаю против поиска простых решений подобных вопросов.
Во-первых, потому что непонятно — какая задача решается таким элементом?
Во-вторых, сразу возникает масса вопросов:

— Сколько вариантов в ряду?
— Если их 3 и больше, как понять, какое следующее значение появится?
— Если их много, то для достижения, скажем, 5-го значения нужно пролистать 4 первых?
— Как понять границы диапазона значений?
— Как контролировать ввод, вставку, перетаскивание значений в поле?
— И так далее...

Здесь, скорее всего, поле не нужно. Как минимум, скрытый select и элемент с визуализацией выбранного пункта. И куча дополнительных телодвижений для повышения usability этого решения. Даже браться не хочется:)

Если вы собираетесь учить людей веб-разработке, то такие простейшие вещи должны знать. Хотя бы разобраться, как это сделано в десятках работающих сайтов типа codepen или jsfiddle.

Вы можете работать с WebGL в рамках canvas. А canvas — просто картинка.
Это значит, что можно модифицировать только правила, использующие картинку (например, фон, рамки или тот же фильтр blur).
Но в самом canvas можно творить чудеса.