Создание уникальных форм с помощью CSS border-radius

Вступление

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

Основы использования border-radius

Начнем с создания простого div-элемента, к которому мы будем применять различные стили:

<div class="shape"></div>

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

.shape {
  width: 200px;
  height: 200px;
  background-color: #3498db;
  margin: 20px auto;
}

Простое скругление углов

Давайте начнем с простого скругления всех углов:

.shape-rounded {
  border-radius: 20px;
}

Скопируйте этот код и добавьте на свою страницу:

<div class="shape shape-rounded"></div>

Разные значения для каждого угла

Теперь попробуем задать разные значения для каждого угла:

.shape-complex {
  border-radius: 50px 10px 30px 5px;
}

Добавьте этот элемент на страницу:

<div class="shape shape-complex"></div>

Создание сложных фигур

Эллиптические скругления

CSS позволяет создавать эллиптические скругления, задавая разные значения для горизонтального и вертикального радиусов:

.shape-elliptical {
  border-radius: 100px / 50px;
}

Пример использования:

<div class="shape shape-elliptical"></div>

Создание «blob» формы

Теперь перейдем к созданию более сложной органической формы, известной как «blob»:

.shape-blob {
  border-radius: 40% 60% 65% 35% / 40% 35% 65% 60%;
}

Добавьте этот элемент на вашу страницу:

<div class="shape shape-blob"></div>

Экспериментируем с формами

Давайте создадим несколько интересных форм, используя различные комбинации значений border-radius:

Форма листа

.shape-leaf {
  border-radius: 0 100% 0 100% / 0 100% 0 100%;
}

<div class="shape shape-leaf"></div>

Форма яйца

.shape-egg {
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

<div class="shape shape-egg"></div>

Форма ромба

.shape-diamond {
  border-radius: 50% 50% 50% 50% / 0 0 100% 100%;
}

<div class="shape shape-diamond"></div>

Анимация форм

Одно из преимуществ использования CSS для создания форм — это возможность легко анимировать их. Давайте создадим простую анимацию для нашей «blob» формы:

@keyframes morph {
  0% {
    border-radius: 40% 60% 65% 35% / 40% 35% 65% 60%;
  }
  50% {
    border-radius: 60% 40% 35% 65% / 65% 60% 40% 35%;
  }
  100% {
    border-radius: 40% 60% 65% 35% / 40% 35% 65% 60%;
  }
}

.shape-animated {
  animation: morph 8s ease-in-out infinite;
}

Добавьте этот элемент на страницу:

<div class="shape shape-blob shape-animated"></div>

Заключение

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

Помните, что использование CSS для создания фигур имеет ряд преимуществ перед SVG:

• Простота использования и поддержки
• Высокая производительность
• Гибкость в изменении и анимации
• Отличная совместимость с браузерами

Продолжайте практиковаться и экспериментировать с border-radius, и вы сможете создавать впечатляющие дизайны без использования дополнительных графических инструментов!

По ссылке есть удобный инструмент для генерации фигур при помощи css.