CSS-фигуры

Фигуры с помощью CSS — тема богатая и интересная. Помимо базовых фигур, используя тени и псевдоэлементы можно сделать много всякого другого, причем некоторые фигуры можно сделать двумя и более способами.

Все фигуры из этого примера можно сделать на основе одного элемента.

Кольца можно сделать с помощью border или box-shadow, причем во втором случае рамка кольца не увеличивает размер фигуры, а колец может быть несколько и они могут быть смещены относительно друг друга:

Сердечки, с трансформами и без:

Инь-ян, удивительно просто, на самом деле (добавлено 3.03.2013). По-моему, на css-tricks.com/examples/ShapesOfCSS/ предлагается более изящное решение, которое, к тому же, решает проблему просвечивающего контура у фигуры с тенями.

Стрелочки:

Про стрелки подробнее читать тут

Цветок:

Про цветы из CSS можно почитать тут.