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

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

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

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

Квадрат

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

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

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

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

Круг

Овал

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

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

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

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

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

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

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

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

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

Трапезоид

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Яйцо

Пакмен

Диалог

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

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

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

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

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

ТВ-экран

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

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

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

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

Флаг Зои Руни

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

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

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

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

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

Автор: Chris Coyier

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

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

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

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

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

Курс по CSS3

Прямо сейчас изучите CSS3 с нуля!

Смотреть курс

Метки:

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree