Как создавать простые и сложные формы с помощью чистого CSS

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

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

Рисование основных форм CSS

Начнем с основных форм, таких как квадрат, прямоугольник, треугольник, круг и эллипс.

Квадрат и прямоугольник

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

HTML

CSS

.rec-sq {
дисплей: гибкий;
пробел: 2em;
маржа: 2em;
}
.квадрат {
ширина: 15бэр;
высота: 15 бэр;
фон: rgb (255, 123, 0);
}
.rectangle {
ширина: 24 бэр;
высота: 14 бэр;
фон: rgb (0, 119, 128);
}

Выход:

Круг и эллипс

Вам просто нужно назначить border-radius 50% в квадрат, и вы получите круг. Проделайте то же самое с прямоугольником, чтобы получился эллипс.

HTML

CSS

.круг {
ширина: 15бэр;
высота: 15 бэр;
фон: rgb (255, 123, 0);
радиус границы: 50%;
}
.ellipse {
ширина: 24 бэр;
высота: 14 бэр;
фон: rgb (0, 119, 128);
радиус границы: 50%;
}

Выход:

Треугольники

Мы будем использовать границы для создания треугольников. Хотите знать, как это работает? Все, что вам нужно сделать, это установить ширина а также рост треугольника к нулю. Значит, продвигаясь вперед, фактическая ширина элемента будет ширина границы. Кроме того, вы, возможно, уже знаете, что края границы расположены под углом 45 градусов друг к другу. Задайте разные цвета для каждой границы и сделайте любые три прозрачными. В конечном итоге у вас будет треугольник.

HTML

CSS

// общий для всех
тело {
дисплей: гибкий;
пробел: 5em;
маржа: 15em;
}.образец {
высота: 8,5 мм;
ширина: 8,5 мм;
верхняя граница: 1em solid # 9ee780;
border-right: 1em сплошной rgb (240, 241, 141);
нижняя граница: 1em сплошной RGB (145, 236, 252);
border-left: 1em сплошной RGB (248, 115, 106);
} .triangle {
высота: 0;
ширина: 0;
верхняя граница: 5em solid # 9ee780;
граница справа: 5em сплошной RGB (240, 241, 141);
нижняя граница: 5em сплошной RGB (145, 236, 252);
граница слева: 5em сплошной RGB (248, 115, 106);
}

Выход:

Вы можете поиграть с рост а также цвет границы чтобы получить разные типы треугольников. Например, вы можете создать треугольник, указывающий вверх, задав нижняя граница сплошным цветом, а все остальные границы - прозрачными. Кроме того, вы можете создать треугольник, указывающий в правильном направлении, или прямоугольный треугольник, поиграв с ширина рамки а также цвет границы.

HTML

CSS

.triangle-up {
высота: 0;
ширина: 0;
верхняя граница: 5em сплошная прозрачная;
border-right: 5em сплошной прозрачный;
нижняя граница: 5em сплошной RGB (145, 236, 252);
border-left: 5em сплошной прозрачный;
}
.triangle-right {
ширина: 0;
высота: 0;
стиль границы: сплошной;
ширина границы: 4em 0 4em 8em;
border-color: прозрачный прозрачный прозрачный rgb (245, 149, 221);
}
.triangle-bottom-right {
ширина: 0;
высота: 0;
стиль границы: сплошной;
ширина границы: 8em 0 0 8em;
border-color: прозрачный прозрачный прозрачный rgb (151, 235, 158);
}

Выход:

Создание сложных фигур с помощью CSS

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

Форма звезды (5 очков)

Вам нужно будет управлять границами, используя значение поворота преобразования. Идея состоит в том, чтобы создать две стороны, используя class = "звезда", две другие стороны с помощью ::после элемент, а последняя сторона - с помощью ::до элемент.

HTML

CSS

.star-five {
маржа: 3.125em 0;
положение: относительное;
дисплей: блок;
ширина: 0em;
высота: 0em;
граница справа: сплошная прозрачная 6,25 мкм;
нижняя граница: сплошной RGB 4,3em (255, 174, 81);
граница слева: сплошная прозрачная 6,25 мкм;
преобразовать: повернуть (35 градусов);
}
.star-five: before {
нижняя граница: 5em solid rgb (255, 174, 81);
border-left: 2em сплошной прозрачный;
граница-правая: сплошная прозрачная 1,875 мкм;
позиция: абсолютная;
высота: 0;
ширина: 0;
верх: -45px;
слева: -65px;
дисплей: блок;
содержание: '';
преобразовать: повернуть (-35deg);
}
.star-five: after {
позиция: абсолютная;
дисплей: блок;
верх: 3 пикселя;
слева: -105px;
ширина: 0;
высота: 0;
граница справа: сплошная прозрачная 6,25 мкм;
нижняя граница: сплошной RGB 4,3em (255, 174, 81);
граница слева: 5.95em сплошная прозрачная;
преобразовать: повернуть (-70deg);
содержание: '';
}

Выход:

Пентагон

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

HTML

CSS

.pentagon {
положение: относительное;
ширина: 10em;
размер коробки: коробка содержимого;
ширина границы: 10em 5em 0;
стиль границы: сплошной;
цвет границы: rgb (7, 185, 255) прозрачный;
верхняя маржа: 20 бэр;
левое поле: 10 бэр;
}
.pentagon: before {
содержание: "";
позиция: абсолютная;
высота: 0;
ширина: 0;
верх: -18em;
слева: -5em;
ширина границы: 0 10em 8em;
стиль границы: сплошной;
цвет границы: прозрачный прозрачный rgb (7, 185, 255);
}

Выход:

Алмазный

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

HTML

CSS

.diamond {
ширина: 0;
высота: 0;
положение: относительное;
верх: -3em;
граница: 3em сплошная прозрачная;
цвет нижней границы: rgb (129, 230, 255);
}
.diamond: after {
содержание: '';
ширина: 0;
высота: 0;
позиция: абсолютная;
слева: -3em;
верх: 3em;
граница: 3em сплошная прозрачная;
цвет границы: rgb (129, 230, 255);
}

Выход:

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

HTML

CSS

Алмазный щит
{
ширина: 0;
высота: 0;
граница: 3em сплошная прозрачная;
нижняя граница: сплошной RGB 1,25 мкм (71, 194, 231);
положение: относительное;
верх: -3em;
}
.diamond-cut: after {
содержание: '';
позиция: абсолютная;
слева: -3em;
верх: 1,25em;
ширина: 0;
высота: 0;
граница: 3em сплошная прозрачная;
border-top: 4,4 em solid rgb (71, 194, 231);
}

Выход:

Сердце

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

HTML

CSS

.сердце {
ширина: 6.25em;
высота: 55em;
положение: относительное;
}
.heart: раньше,
.heart: after {
содержание: "";
ширина: 3em;
высота: 5em;
позиция: абсолютная;
слева: 3em;
верх: 0;
фон: красный;
радиус границы: 3em 3em 0 0;
преобразовать: повернуть (-45deg);
трансформация происхождения: 0 100%;
}
.heart: after {
слева: 0;
преобразовать: повернуть (45 градусов);
трансформация происхождения: 100% 100%;
}

Выход:

Экспериментируйте с чистыми формами CSS

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

Как создать адаптивную панель навигации с помощью HTML и CSS

Обращение ко всем начинающим веб-разработчикам: это руководство даст вам навыки, необходимые для создания собственных отзывчивых навигационных панелей, используя только HTML и CSS!

Читать далее

Об авторе