Различные фигуры CSS

Различные фигуры CSS

От автора: с помощью CSS фигуры создаются не слишком сложно. Квадраты и прямоугольники создать просто, так как они являются естественными фигурами сети. Добавьте ширину и высоту, и у вас есть прямоугольник точного размера. Добавьте border-radius, и вы можете округлить эту фигуру, этого достаточно, чтобы превращать эти прямоугольники в круги и овалы.

Мы также имеем псевдо-элементы ::before и ::after psuedo, которые дают нам возможность добавить еще две фигуры к исходному элементу. Применив умение позиционировать, трансформировать и многие другие трюки, мы можем создавать в CSS множество фигур только из одного элемента HTML.

Квадрат

Прямоугольник

Круг

Овал

Треугольник вверх

Треугольник вниз

Треугольник влево

Треугольник вправо

Треугольник вверх влево

Треугольник вверх вправо

Треугольник вниз влево

Треугольник вниз вправо

Изогнутая стрелка с хвостом — Андо Разафимандимби

Трапезоид

Параллелограмм

Звезда (6-угольная)

Звезда (5-угольная) Кита МакАлистера

Пятиугольник

Шестиугольник

Восьмиугольник

Сердце Николаса Галлахера

Бесконечность Николаса Галлахера

Ромб Джозефа Зильбера

Сплюснутый ромб Джозефа Зильбера

Вытянутый ромб Джозефа Зильбера

Усеченный ромб Александра Футкова

Яйцо

Пакмен

Диалог

12-угольный диск Алана Джонсона

8-угольный диск Алана Джонсона

Инь-Ян Александра Футекова

Значок ленты Каталин Розу

Космический захватчик Влада Цинкулеску

ТВ-экран

Шеврон Энтони Тикнора

Увеличительное стекло

Значок Facebook* Натана Сварца

Луна Омида Расули

Флаг Зои Руни

Конус Омида Расули

Крест Кайи Башарана

Пятиугольник Джоша Роджерса

Указатель Фрисинкера Амсаканна

Замок Колина Бэйта

Автор: Chris Coyier

Источник: //css-tricks.com/

Редакция: Команда webformyself.

* Признана экстремистской организацией и запрещена в Российской Федерации.

Метки:

Похожие статьи:

Комментарии Вконтакте: