Как создать фигуру на css?

В HTML и CSS существует несколько способов создания фигур, таких как круги, прямоугольники или треугольники. Вот несколько примеров:

1. Создание прямоугольника с помощью CSS:

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

CSS:

.rectangle {
  width: 200px;
  height: 100px;
  background-color: blue;
}

В данном примере мы создали прямоугольник, установив ширину (width) в 200 пикселей и высоту (height) в 100 пикселей. Фоновый цвет (background-color) установлен на синий.

2. Создание круга с помощью CSS:

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

CSS:

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
}

Здесь мы создали круг, установив ширину и высоту в 100 пикселей, а радиус границы (border-radius) в 50%, чтобы получить окружность. Фоновый цвет установлен на красный.

3. Создание треугольника с помощью CSS:

<div class="triangle"></div>

CSS:

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid green;
}

В этом случае мы создаем треугольник, установив ширину и высоту равными нулю. Затем мы устанавливаем границы используя свойство border для левой и правой стороны, но делаем их непрозрачными и устанавливаем нулевую ширину. Для нижней границы мы устанавливаем сторону размером 100 пикселей и фоновый цвет зеленый.

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