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

В этой статье мы начнем с основ. Изучим процесс создания базовых фигур с помощью CSS:

Содержание

Квадрат

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

Все просто: нам нужен HTML-элемент с одинаковыми высотой и шириной:

<div class="square"></div>

.square {
  width: 200px;
  height: 200px;
  background: #3e92cc;
}

В результате мы получим квадрат:

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

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

<div class="rectangle"></div>

.rectangle {
  width: 300px;
  height: 200px;
  background: #3e92cc;
}

В результате мы получим прямоугольник:

Круг

Теперь переходим к моей любимой фигуре - кругу. Круг является универсальной фигурой, необходимой для создания кнопок и аватаров.

Создадим фигуру с равными высотой и шириной, как для квадрата, и добавим свойство border-radius.

<div class="circle"></div>

.circle {
  width: 200px;
  height: 200px;
  background: #3e92cc;
    border-radius: 50%;
}

В результате мы получим круг:

Овал

И, наконец, переходим к овалу. Добавляем все тот же border-raduis, но теперь к прямоугольнику. Для создания овала высота и ширина фигуры должны быть различными.

<div class="oval"></div>

.oval {
  width: 300px;
  height: 200px;
  background: #3e92cc;
    border-radius: 50%;
}

В результате мы получим овал:

Спасибо за внимание.