Как создать удивительные эффекты с фигурами CSS

Jan 31, 2026

Инструкции

Разработчики Frontend, как правило, думают в прямоугольниках; Прямоугольники внутри прямоугольников внутри прямоугольников внутри прямоугольников. Мы могли бы использовать трюки с границами, чтобы сделать круги или треугольники, но на самом деле они все еще просто прямоугольные ящики в маскировке. Ну, это собирается изменить с CSS. Формы, А. W3c. Рекомендация кандидата, которая изменит так, как вы думаете.

Рождественское предложение: Сэкономьте до 47% на подписку на Net Magazine

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

Возможно, самая мощная функция формы - многоугольник (), поскольку она позволяет создавать сложные произвольные формы с использованием неограниченных точек, определенных с использованием координатных пар. Если вы использовали Овладение Это будет вам знакомо.

В этом уроке мы будем использовать многоугольники с свойством CliP-Path, чтобы вырезать геометрическую форму из нашего текста, так что только площадь, заключенная внутри полигона. Мы также добавим несколько простых переходов, чтобы принести эффект к жизни. Вы можете схватить код на каждый шаг в этом репо из Github, здесь Отказ

01. Начни с HTML

Во-первых, давайте будем готовы к HTML. Нам просто нужно & lt; div & gt; , наш охватывать Класс и наш текст, но, как мы будем использовать псевдоэлементы для этого эффекта, мы также добавим атрибут с тем же значением, что и текст, поэтому мы можем прочитать его в CSS, а не в жестком кодировании.

 (62]
Отсечение демонстрации
& lt; / div & gt;

Далее мы хотим заставить его заполнить экран и выровнять текстовый мертвый центр - мы можем использовать некоторые Flexbox. Магия для этого. Давайте также стиль и размер текста.

 .clip {
// Заполнить экран
Должность: абсолютный;
Вершина: 0;
Слева: 0;
Ширина: 100%;
Высота: 100%;
// выравнивание
Дисплей: flex; // Используйте Flex для выравнивания
оправдание-контент: центр; // горизонтальное выравнивание
Выравнивание-элементы: центр; // вертикальное выравнивание
// текстовый стиль
Семья шрифтов: «Работа санс», Arial, Helvetica, Sans-Serif; // Work Sans доступен в Google Fonts
вес шрифта: 800;
Размер шрифта: 8rem;
текстовый выровнян: центр;
Текстовое преобразование: прописные буквы;
}

02. Добавьте немного стиля

Теперь мы можем стиль ::перед и ::после псевдоэлементы, с каждым становлением слоя сверху текста. По умолчанию, ::после будет иметь самый высокий Z-индекс. Удобное attr () Селектор прочитает ценность нашего Данные-контент атрибут.

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

 .clip {
...
// Позиция Self (& amp;) и псевдоэлементы (до / после)
& amp;
& amp; :: раньше,
& amp; :: после {
  Должность: абсолютный;
  Вершина: 0;
  Слева: 0;
  Ширина: 100%;
  Высота: 100%;
  Дисплей: flex; // Используйте Flex для выравнивания
  оправдание-контент: центр; // горизонтальное выравнивание
  Выравнивание-элементы: центр; // вертикальное выравнивание
}
& amp; :: раньше,
& amp; :: после {
  Содержание: attr (содержимое данных); // используем значение атрибута как содержимое
}
}

Результатом в браузере следует выглядеть идентичным, потому что псевдоэлементы сидят непосредственно сверху текста. Вы можете изменить их стили в Devtools. чтобы увидеть, как они наслоены.

03. Установить фоны и цвета

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

Это полезно, так как в противном случае нам придется использовать два разных типа линейных разрывов: & lt; br & gt; внутри & lt; div & gt; и более неясный \ А. в атрибуте.

 .clip {
...
& amp;
& amp; :: раньше,
& amp; :: после {
  прокладки: 0 50%;
  Размеры коробки: пограничная коробка;
}
& amp; :: до {
  Цвет: $ белый;
  Фон: $ Pink;
}
& amp; :: после {
  Цвет: $ розовый;
  Фон: $ синий;
}
}

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

04. Закрепите текст

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

То ::перед Псевдоэлемент будет видимым только в верхнем левом треугольнике, а также ::после Псевдоэлемент будет видимым только в нижнем правом треугольнике. Вот код для достижения этого:

 .clip {
...
& amp; :: до {
  Клип-путь: полигон (0 0, 100% 0, 0 100%, 0 100%);
}
& amp; :: после {
  Клип-путь: полигон (100% 0, 100% 100%, 0 100%, 100% 0);
}
}

Это создает многоугольники с четырьмя точками. Каждая точка описывается координатной парой; Просто х (слева направо) и Y (сверху вниз) значение. Значение может быть абсолютно (например: PX) или относительно (например,:%). Точки ссылаются на левый верх, поэтому точки на 100% 100% находятся в правом нижнем углу.

Представьте себе строки, соединяющие каждую из точек, в котором они перечислены для формирования форм. в ::перед Polygon он начинается в верхнем левом углу (0 0) движется по экрану до верхнего правого (100% 0) , а затем вниз к левому дну (0 100%) Отказ

Надеюсь, вы будете видеть ваш обрезанный текст сейчас. Измените изменение браузера, и вы увидите реагирование отсечения соответственно.

Если вы используете Chrome, вы, вероятно, увидите некоторые проблемы с перерасходами при изменении размера, вызванные композитными слоями Chrome. К сожалению, потому что демонстрация полного экрана, рекомендуется Изменить: преобразование имущество Преобразование: Translatez (0) Hack Не исправляйте это. Однако, если вы переключаетесь охватывать к Положение: исправлено; оно работает.

 Клип {
& amp;
& amp; :: раньше,
& amp; :: после {
  Положение: исправлено;
}
}

Помните, что Chrome пытается быть полезным, и этот обходной путь окажет влияние на производительность. Обязательно выполняйте производительность при выполнении таких вещей в производстве.

05. Добавьте переходы

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

Состояние 1: это начальное состояние, поэтому давайте создадим три других

Добавьте каждый блок в нижней части ваших CSS, так что вы можете увидеть, как выглядит так.

Штат 2: слегка переместить треугольники, чтобы открыть фон

Это будет выглядеть немного похоже на флаг Республики Конго. Удаление 20 процентов от кончика каждого треугольника многоугольника сделает трюк.

Штат 3: Морфирующие треугольники в прямоугольники

Это похоже на французский триколор, в обратном порядке.

Как насчет этой четвертой координатной пары? Ну, это где это приходит в полезное. Оказывается, что переход Клип-путь Работает только в том случае, если используемая форма формы является той же (так что Polygon & GT; Polygon), а количество используемых точек одинаково - браузер переходит на каждую индивидуальную точку. Вот почему у нас есть эта четвертая скрытая точка - это позволяет нам беспрепятственно переходить от треугольника к прямоугольнику, мы просто раскрываем, что четвертый момент, когда нам это нужно.

 .clip {
& amp; :: до {
  Клип-путь: полигон (0 0, 40% 0, 40% 100%, 0 100%);
}
& amp; :: после {
  Клип-путь: полигон (100% 0, 100% 100%, 60% 100%, 60% 0);
}
}

Состояние 4: крутить эти полигоны

Придерживаясь к нашему флагуте тему, это напоминает «Мне нужен буксир» в мире сигнализации морского флага.

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

 .clip {
& amp; :: до {
  Клип-путь: полигон (100% 0, 0 0, 100% 100%, 0 100%);
}
& amp; :: после {
  Клип-путь: полигон (100% 0, 100% 100%, 0 0, 0 100%);
}
}

Заворачивать

Мы все устанавливаем, но мы еще не можем изменить состояния, что означает, что вы не можете видеть переходы в действии. Есть много способов достичь этого, так что это зависит от вас. В репо и кодепене я использовал 100-процентный раствор без JavaScript с скрытыми радиопередачами и селектором общего брата - сделай вид. Вы также можете проверить этот кодепен в этом руководстве здесь Отказ

Эта статья изначально появилась в выпуске 298 из сеть Журнал для профессиональных веб-дизайнеров и разработчиков - предлагая последние новые веб-тренды, технологии и методы. Купить проблему 298 здесь или же Подписаться на Net здесь Отказ

Специальное рождественское предложение: Сэкономьте до 47% на подписку на нет для вас или друга на Рождество. Это ограниченное предложение, поэтому двигайтесь быстро ...

Статьи по Теме:

28 выдающихся примеров CSS
Как создать макет пирамиды с фигурами CSS
CSS трюки для революции ваших веб-макетов

Как создать удивительные эффекты с фигурами CSS

01. Начни с HTML

02. Добавьте немного стиля

03. Установить фоны и цвета

04. Закрепите текст

05. Добавьте переходы

Заворачивать

Инструкции - Самые популярные статьи

21 шаги для Super Speedy JavaScript

Как кодировать умные эффекты текста с CSS

Создайте блог с сеткой и FlexBox

Руководство по облачному видению Google

17 способов рисовать лучшие существа

Добавить анимацию пользовательских интерфейсов на ваш сайт

Как смешивать цвет тени в краске

Создание масштабируемых адаптивных компонентов

Категории