Блоки в виде геометрических фигур на CSS

Блоки в виде геометрических фигур на CSS

Приветствую вас, дорогие друзья!

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

Итак, начнём с простого.

Блок в виде квадрата и прямоугольника

Текст

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

Для создания такого квадрата добавляем следующий HTML код:

Текст внутри блока может быть любым, CSS класс при желании вы тоже можете задать свой.

Теперь нам нужно в CSS файл вашей темы или страницы добавить следующий код:

Я комментариями пометила что где задаётся чтобы вы могли без проблем поменять значения на свои.

Так же вы можете добавит CSS стили и другими способами. Более подробно об этом написано в этой статье: «Как css подключить к html?»

Прямоугольный блок будет создаваться аналогично, единственное там будет другая ширина.

Пример оформления текста в прямоугольнике
Обращаю ваше внимание на то что для того чтобы ваш блок адаптировался под мобильный устройства для задания его ширины нужно использовать или проценты или изначально задавать ширину в процентах и добавлять ещё свойство max-width, в котором задавать максимальную ширину блока в пикселях. Таким образом на больших экранах он будет иметь ширину в пикселях, а на маленьких – будет сжиматься под размер экрана.

HTML:

CSS:

Если вы добавили HTML код и CSS стили, а они не срабатывают, почитайте вот эту статью: «Почему не работают CSS-стили?»

Блок в виде круга и овала

Текст

Делается аналогично квадрату и прямоугольнику, только добавляется ещё CSS свойство border-radius.

HTML:

CSS:

Блок в виде параллелограмма

Блок в виде параллелограмма

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

HTML:

CSS:

При помощи свойства transform: skew(-20deg); вы можете в градусах регулирвовать угол наклона. Для наклона влево нужно задать положительное значение в скобках.

Так же я добавила ему ещё рамку справа чтобы смотрелось интереснее.

Блок в виде трапеции

Блок в виде трапеции

Этот пример будет создаваться за счёт задания границы блока и использовании значения transparent для свойства border.

HTML:

CSS:

Блок в виде восьмиугольника

Блок в виде восьмиугольника

Для создания такого примера нам понадобится clip-path, которое позволит обрезать ненужные углы. Так же нам нужно будет задать координаты для обрезки при помощи polygon.

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

Чтобы срезы углов были симметричными воспользуемся функцией calc.

HTML:

CSS:

Для того чтобы изменить размер срезов достаточно в polygon вместо 30px везде поставить своё значение.

Блок в виде треугольника

Треугольник

Аналогичным образом мы можем срезать углы чтобы получился треугольник.

HTML:

CSS:

Выравнивание по вертикали в этих примерах мы выполняем за счёт вертикальных внутренних отступов.
Выравнивание

Вот, собственно говоря, и всё что хотела вам рассказать. Если поэкспериментировать с этими примерами, то можно создать свои оригинальные блоки для оформления текстов и не только.

Если статья вам понравилась, то оставляйте свои комментарии и делитесь ей соцсетях. Если не понравилась – тоже пишите в комментариях :)

Удачи вам!

С уважением Юлия Гусарь

Подписаться на рассылку

Читайте также:

comments powered by HyperComments

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

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

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif