Создание геометрических фигур методами CSS

Современные методы CSS позволяют создавать самые разные формы и геометрические фигуры при помощи таблиц стилей и HTML-кода. Теперь вы можете создать красивую звезду или фигурную форму для ввода данных, квадрат или стрелки без использования графических файлов.

Возможность создавать геометрические фигуры при помощи CSS позволяет сделать ваш сайт «легче», что очень актуально для адаптивной верстки или мобильных версий проекта. Кроме того, дизайн получает еще больше гибкости, а эффекты, которые становятся доступны при применении форм в CSS, во многих случаях невозможны при традиционной «нарезке» графических элементов.

Формы и элементы, созданные при помощи CSS, никак не влияют на особенности текста внутри фигуры, стиль, цвет или размер контента. Вы можете проявить фантазию, использовать необычные эффекты, в том числе, очень точно воссоздавать типографические (печатные) макеты для сайтов с адаптивной версткой.

Текст на вашем сайте может находиться на фоне любого из этих элементов, может обтекать их любым удобным для вас образом, в том числе, частично. Например, вот так:

С другой стороны, при помощи фигурных элементов можно создавать блоки нестандартной формы, в результате чего сайт становится очень стильным, а верстка – заметно упрощается. В этих блоках могут размещаться текст, графические файлы, формы ввода и т.д. Например, следующим образом:

Для того чтобы создавать любые фигуры, потребуются свойства, которые появились только в CSS3: transform и border-radius. Кроме них используются обычные параметры width, height,   background (для определения цвета фигуры), а также border-radius для округлых линий (окружности, овалы, скругленные углы и пр.).

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

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

HTML код

Для того чтобы задать ту или иную форму в HTML кода, нам потребуется привычный всем тег div, который в параметре ID получит имя выбранной геометрической фигуры.

Например, ID  круга можно назвать Circle. Тогда, чтобы вставить круг в код, понадобится такой код:

Окружность

Для получения красивого круга в CSS нужно задать два равные друг другу значения: width и height, а также параметр кривизны линий border radius, который должно будет равняться половине от значений width и height.

Квадрат

Для создания квадрата особых хитростей не потребуется, нужно просто задать равные друг другу значения width и height :

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

Аналогично квадрату задаем параметры width и height, но при этом значение width будет больше:

Овал

Овал – это «вытянутая» окружность, так его и задаем. Параметр width делаем в 2 раза больше, чем   height, а значение border-radius, как и для окружности, будет равно половине height:

Треугольник

Треугольник создается при помощи манипуляций со значением border. В зависимости от его ширины, будут меняться внутренние углы треугольника:

Чтобы выбрать другое направление треугольника, нужно задать другой набор границ. Так, для перевернутого треугольника используется параметр border-top вместо bottom. А для треугольников, которые «смотрят» влево или вправо, меняются значения left и right.

Ромб

Ромб можно делать несколькими методами. Проще всего вспомнить, что ромб – это два треугольника с общим основанием, направленные в противоположные стороны. Манипулировать удобнее всего будет свойством transform вместе со значениями свойства rotate:

Трапеция

Трапеция создается при помощи установки плоской нижней границы и одинаковых значений для правого и левого края:

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

Параллелограмм также создать достаточно просто. Для этого устанавливаем transform равным skew, чтобы получить поворот на 30 градусов:

Звезда пятиконечная

Звезды создаются при помощи последовательности манипуляций с границами формы при помощи свойства transform, равного rotate:

Этот код поможет получить классическую пятиугольную звезду. Если вам потребуется шестиугольная, восьмиугольная или любая другая многолучевая звезда, проще использовать набор треугольников.

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

Пятиугольник – это два элемента, которые объединяются в один. Первый – это перевернутая трапеция, второй – треугольник, стоящий на основе этой трапеции:

Шестиугольник можно создать так же, как и пятиугольник, собирая его из более простых фигур. Просто добавляем к пятиугольной форме 2 треугольника вверху и получаем нужную нам форму. Аналогично и с другими многоугольниками.

Сердце

Сердце создают при помощи вращения более простых элементов под разными углами с одновременной сменой значений transform-origin, что поможет изменить местоположение вращаемых элементов.

Подробнее – смотрите код:

Яйцо

Еще одна необычная фигура, которую можно реализовать в CSS, создается он на основе овала, в котором свойство height оказывается больше, чем width. Также при создании «яйца» нужно будет особенно внимательно отнестись к значениям параметра radius. Именно подбор его значений позволяет получить нужный результат:

И в заключение

Существует очень много разнообразных форм, которые можно «нарисовать» методами CSS3. Их составляют из простых фигур, примеры которых приведены выше, или на их основе при помощи изменений того или иного параметра. Такие элементы дизайна можно использовать в качестве форм, кнопок или блоков, они могут стать украшением и помогут воплотить в жизнь идеи, реализовать которые при помощи обычной верстки с применением графических файлов невозможно или очень сложно.

Пробуйте новые решения, внедряйте их, экспериментируйте. А наш движок html верстки сайтов поможет вам еще быстрее добиться нужных результатов!