Войти
Регистрация

Фигуры в CSS

Фигуры в CSS

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

Все, даже самые простые фигуры рисовались в визуальных редакторах, вставлялись картинки в HTML-верстку.

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

Давайте напишем пример фигуры "Треугольник". Для этого нам понадобится лишь один элемент <div>

div {
  border-left:40px transparent;
  border-right:40px transparent;
  border-bottom:70px blue;
  height:0;
  width:0;
}

В итоге получаем равносторонний треугольник:

Как это получилось? - спросите Вы. Все очень просто. С помощью свойств для границ элемента и получается создавать фигуры.

В нашем случае мы элементу задали высоту и ширину 0, т.к. размер фигуры будут задавать размеры границ. Чем они толще, тем больше фигура.

Мы привыкли видеть границу фигуры в виде толстой рамки, это если мы просто напишем border:2px solid red;. Но если задать цвет для каждой границы мы увидим, что они все имеют вид треугольника, конечно, если у блока убрать высоту и ширину.

Чтобы Вы понимали, о чем я пишу, укажем толщину, тип и цвет каждой границы блока:

div {
  border-left:40px solid red;
  border-right:40px solid blue;
  border-bottom:40px solid green;
  border-top:40px solid orange;
  height:0;
  width:0;
}

Мы увидим вот такой блок:

Каждая граница сужается, принимая вид треугольника. Соответственно этим можно управлять, создавая фигуры.

Чтобы создать трапецию необходимо лишь задать ширину блока с нашим треугольником, например 100px. Попробуйте проделать сами с первым примером треугольника.

Как создать квадрат, прямоугольник или круг я думаю Вы догадались, там все просто: создаем блок с высотой и шириной, задаем фон - вот Вам и квадрат, делаем радиус 100%, вот и круг.

А как создать звезду, допустим шестиугольную?

Здесь уже понадобятся псевдоэлементы. Для этого возьмем наш первый пример с треугольником и применим к нему псевдоэлемент before:

div {
  border-left:40px transparent;
  border-right:40px transparent;
  border-bottom:70px blue;
  height:0;
  position:relative;
  width:0;
}
div::before {
  border-left:40px transparent;
  border-right:40px transparent;
  border-bottom:70px blue;
  content:"";
  height:0;
  left:-40px;
  position:absolute;
  top:20px;
  width:0;
}

В итоге получаем

Как видите, звезда это всего лишь 2 треугольника. Первый треугольник обычный, в который мы лишь добавили свойство position:relative для того, чтобы второй треугольник выравнивать по отношению к первому.

Второй треугольник это у нас созданный псевдоэлемент before, который мы сделали перевернутым, за счет верхней границы и далее уже выровняли его, применив абсолютное позиционирование и задав координаты с помощью left и top.

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

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

Далее уже создавайте ее по частям задавая стиль как основному элементу, так и его псевдоэлементам.

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

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

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

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?