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

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

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

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

Квадрат

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Круг

Овал

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

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

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

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

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

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

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

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

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

Трапезоид

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

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

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

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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

Яйцо

Пакмен

Диалог

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

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

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

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

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

ТВ-экран

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

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

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

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

Флаг Зои Руни

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

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

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

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

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

Автор: Chris Coyier

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

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

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