Рисунок css как сделать

Существует несколько способов создания рисунков с помощью CSS. Для примера мы создадим простой рисунок кота.

Сначала создадим блок для кота:

<div class="cat"></div>

Затем зададим стили для этого блока:

.cat {
  position: relative;
  width: 200px;
  height: 180px;
  background-color: #ffe0bd;
  border-radius: 25px;
}

В этом примере мы задали блоку ширину и высоту, а также цвет фона и скругление углов.

Теперь добавим некоторые стили для элементов внутри блока:

.cat::before {
  content: "";
  position: absolute;
  top: 60px;
  left: 20px;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
}

.cat::after {
  content: "";
  position: absolute;
  top: 60px;
  left: 130px;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
}

Здесь мы использовали псевдоэлементы ::before и ::after, чтобы создать два круга — глаза кота. Мы также задали им позицию, ширину, высоту, цвет фона и скругление углов.

Далее нужно добавить стили для ушей кота:

.cat .ear {
  position: absolute;
  top: -25px;
  width: 60px;
  height: 70px;
  background-color: #ffe0bd;
  border-radius: 50% 50% 0 0;
  transform: rotate(-45deg);
}

.cat .ear.left {
  left: 35px;
  transform-origin: 100% 100%;
}

.cat .ear.right {
  left: 105px;
  transform-origin: 0% 100%;
}

Здесь мы использовали классы .ear.left и .ear.right, чтобы задать различные значения свойств left и transform-origin для левого и правого уха. С помощью свойства transform: rotate(-45deg) мы повернули уши на 45 градусов.

Добавим стили для носа кота:

.cat .nose {
  position: absolute;
  top: 110px;
  left: 75px;
  width: 50px;
  height: 40px;
  background-color: #e66b6b;
  border-radius: 50% 50% 0 0;
  transform: rotate(45deg);
}

Здесь мы задали позицию, ширину, высоту, цвет фона и скругление углов для носа. С помощью transform: rotate(45deg) мы повернули нос на 45 градусов.

И наконец добавим рот кота:

.cat .mouth {
  position: absolute;
  top: 130px;
  left: 80px;
  width: 40px;
  height: 10px;
  background-color: #e66b6b;
  border-radius: 50% 50% 0 0;
  transform: rotate(-10deg);
}

Здесь мы задали позицию, ширину, высоту, цвет фона и скругление углов для рта. С помощью transform: rotate(-10deg) мы повернули рот на 10 градусов.

Эти стили создадут простой рисунок кота, как показано на изображении: