Как нарисовать в css

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

Вот несколько способов, которые могут пригодится:

1. border-radius — свойство, позволяющее создавать скругления углов у блоков и других элементов. Например:

.my-element {
  width: 200px;
  height: 200px;
  border-radius: 50%; /* скругляем все углы на 50% от размера элемента */
  background-color: red;
}

Код выше создаст простой круг красного цвета.

2. box-shadow — свойство, используемое для создания теней на элементах. Например:

.my-element {
  width: 200px;
  height: 200px;
  box-shadow: 4px 4px 20px 1px rgba(0, 0, 0, 0.5); /* создаем тень */
  background-color: red;
}

Здесь мы создаем небольшую тень круга.

3. transform — свойство, позволяющее применять к элементам различные трансформации, например, вращение или масштабирование. Например:

.my-element {
  width: 200px;
  height: 200px;
  transform: rotate(45deg); /* поворачиваем элемент на 45 градусов */
  background-color: blue;
}

Код выше поворачивает элемент на 45 градусов.

4. linear-gradient() — функция, используемая для создания линейных градиентов. Например:

.my-element {
  width: 200px;
  height: 200px;
  background: linear-gradient(to bottom right, red, yellow); /* линейный градиент */
}

Здесь мы создаем линейный градиент от красного цвета до желтого.

Эти свойства и функции могут помочь в создании некоторых эффектов и фигур, но для создания более сложных рисунков, потребуется использование специальных графических приложений или использование тега <canvas> и JavaScript.