Создание геометрических фигур с помощью CSS: от простого треугольника до сердца

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

Содержание

Шаг 1: Создание Цветного Квадрата
Шаг 2: Превращение Квадрата в Треугольники
Шаг 3: Создание Одного Треугольника
Шаг 4: Поворот Треугольника
Шаг 5: Создание Сердца с Помощью CSS
Заключение

Шаг 1: Создание Цветного Квадрата

Начнем с простого цветного квадрата. Для этого нам потребуются базовые CSS-свойства: width, height и border.

.box {
width: 200px;
height: 200px;

border-top: 10px solid lightgreen;
border-right: 10px solid mediumpurple;
border-bottom: 10px solid lightsalmon;
border-left: 10px solid moccasin;
}

В этом примере каждая сторона квадрата имеет свой цвет. Мы видим, что стороны соприкасаются по диагонали, создавая яркий, цветной квадрат.

Шаг 2: Превращение Квадрата в Треугольники

Теперь уберем ширину и высоту блока и увеличим размеры границ, чтобы получить четыре треугольника.

.box {
width: 0;
height: 0;

border-top: 100px solid lightgreen;
border-right: 100px solid mediumpurple;
border-bottom: 100px solid lightsalmon;
border-left: 100px solid moccasin;
}

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

Шаг 3: Создание Одного Треугольника

Если вам нужен только один треугольник, просто сделайте три оставшиеся стороны прозрачными.

.box {
width: 0;
height: 0;

border-top: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid lightsalmon;
border-left: 100px solid transparent;
}

Теперь у нас есть один треугольник, который легко можно использовать в различных веб-дизайнах.

Шаг 4: Поворот Треугольника

Чтобы повернуть треугольник, добавим свойство transform:

.box {
width: 0;
height: 0;

border-top: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid lightsalmon;
border-left: 100px solid transparent;

transform: translateX(-100px) translateY(-100px) rotate(-45deg);
}

Теперь треугольник повернут, что добавляет разнообразие и гибкость в его использовании.

Шаг 5: Создание Сердца с Помощью CSS

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

.heart {
position: relative;

width: 200px;
height: 160px;
}
.heart:before,
.heart:after {
position: absolute;
content: "";

width: 100px;
height: 160px;
left: 100px;

background-color: tomato;

border-radius: 100px 100px 0 0;

transform: rotate(-45deg);
transform-origin: 0 100%;
}

Пока что у нас есть только половина сердца. Чтобы завершить фигуру, повернем один из блоков по оси Y:

.heart:after {
left: 0;

transform-origin: 100% 100%;
transform: rotate(45deg);
}

Теперь у нас получилось полноценное сердце, созданное исключительно с помощью CSS!

Заключение

Создание геометрических фигур с помощью CSS — это увлекательный процесс, который открывает перед разработчиками огромные возможности. Мы начали с простого треугольника и закончили сложной фигурой — сердцем. Как видите, с помощью CSS можно создавать действительно интересные и красивые объекты, и все это без единой строки JavaScript. Попробуйте сами — это проще, чем кажется!