Css-фигуры

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

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

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

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

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

Стрелочки:

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

Цветок:

Про цветы из Css читать тут

Ссылки по теме:
css-tricks.com/examples/ShapesOfCSS/
nicolasgallagher.com/pure-css-gui-icons/demo/— целое семейство иконок, сделанных на чистом Css
Box shadow
Transform
Border radius
Если вы нашли ошибку или неточность, вы можете отредактировать статью с помощью prose.io, а также можно написать мне в комментариях или в Twitter.
Система комментирования от Disqus