Вступление
В этом уроке мы научимся создавать уникальные и нестандартные фигуры с помощью 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.