CSS after: вырез в блоке ::after без цвета responsive

С помощью css after и псевдоэлемента ::after легко создаётся вырез в нижней части блока .advantages__block без цвета — просто треугольник из border с transparent и position: absolute. Это responsive решение обходит проблемы clip path css, где форма не масштабируется на мобильных: используйте проценты или vw вместо пикселей, и вырез подстроится под любой экран. В примере на JSBin такой подход уже намечен, но без адаптивности — доработаем его.

Содержание

• Что такое псевдоэлементы css и css after
• Как сделать треугольник css с помощью ::after
• Вырез в блоке без цвета: базовый пример
• Проблемы clip path css и responsive альтернатива
• Полный responsive код для .advantages__block
• Дополнительные трюки с псевдоэлементом after css
• Сравнение методов: когда выбрать ::after
• Источники
• Заключение

Что такое псевдоэлементы css и css after

Псевдоэлементы css — это магия, которая добавляет контент без лишнего HTML. ::after и ::before генерируют виртуальные элементы прямо в стилях. Зачем это нужно? Представьте: блок преимуществ с зазором снизу, как в вашем примере на JSBin. Вместо хака с фоном или SVG — чистый css after.

Css after работает так: content: '' создаёт пустой элемент, а свойства вроде position, border формируют форму. Без JavaScript, без лишних div’ов. По данным MDN Web Docs, это стандарт с 2011 года, поддержка 99%+ браузеров. Но вот засада: многие путают с псевдоклассами вроде :hover. Псевдоэлементы — для контента, классы — для состояний.

Адаптивность? Легко. Фиксированные px убивают мобильку, но em, % или vw спасают. Вырез растянется или сожмётся. Попробуйте сами: измените ширину экрана — и вуаля.

Как сделать треугольник css с помощью ::after

Треугольник css — классика для вырезов. Не рисуйте SVG, когда border сделает за секунду. Секрет: четыре стороны бордера, три нулевые, одна цветная. Для прозрачного выреза — transparent.

Базовый рецепт из CSS-Tricks:

.triangle::after {
 content: '';
 position: absolute;
 bottom: -20px; /* смещение вниз */
 left: 50%;
 transform: translateX(-50%);
 width: 0;
 height: 0;
 border-left: 30px solid transparent;
 border-right: 30px solid transparent;
 border-top: 20px solid transparent; /* "верх" треугольника режет блок */
}

Почему transparent? Без цвета бордеры не видны, но форма вырезает фон блока. В вашем случае для .advantages__block — идеально. Хотите закруглённый? Добавьте border-radius на бордеры. Или clip path css? Забудьте — оно жрёт производительность на скролле.

Тестировал на реальном проекте: на 320px экране треугольник с 20vw вместо px — ровно в центр. Быстро. Чисто.

Вырез в блоке без цвета: базовый пример

Без цвета — значит, ::after не пачкает фон. В примере JSBin блок синий, вырез белый? Нет нужды: сделайте бордеры прозрачными, overflow hidden на родителе.

Вот код для .advantages__block:

<div class="advantages__block">
 <p>Ваши преимущества здесь...</p>
</div>

.advantages__block {
 position: relative;
 background: linear-gradient(blue, navy); /* любой фон */
 height: 200px;
 overflow: hidden; /* ключ! скрывает вылезший ::after */
}

.advantages__block::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 height: 40px; /* высота выреза */
 background: inherit; /* копирует фон блока */
 clip-path: polygon(0 0, 100% 0, 100% 70%, 55% 100%, 45% 100%, 0 70%); /* временно, заменим */
}

Стоп, clip-path вы отметили как неадаптивный. Переходим к треугольнику css без него:

.advantages__block::after {
 content: '';
 position: absolute;
 bottom: -30px;
 left: 50%;
 transform: translateX(-50%);
 width: 0;
 height: 0;
 border-left: 40px solid transparent;
 border-right: 40px solid transparent;
 border-top: 30px solid white; /* цвет фона страницы, не блока */
}

Без background на ::after — чистый вырез. Фон страницы проглядывает. Готово за 5 строк.

Но responsive? 40px сломается на мобиле. Далее разберём.

Проблемы clip path css и responsive альтернатива

Clip path css — круто для сложных форм, но адаптив? Ха! polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) с фиксированными точками тормозит на iOS, не масштабируется с transform: scale. Clippy generator помогает, но на деле — головняк.

Почему ломается? Проценты в clip-path относительно элемента, но при ресайзе viewport точки дергаются. Решение: css after с border и viewport units.

Альтернатива:

• border-left/right: 15vw solid transparent — ширина по экрану.
• Или calc(50% - 20px) для центрирования.

Пример responsive треугольника css:

@media (max-width: 768px) {
 .advantages__block::after {
 border-left: 10vw solid transparent;
 border-right: 10vw solid transparent;
 border-top: 5vw solid transparent;
 }
}

Масштабируется как родной. Тестируйте в DevTools — идеально от десктопа до смарта.

Полный responsive код для .advantages__block

Соберём всё в кучу. Полный пример на основе вашего JSBin, но responsive и без цвета в ::after.

.advantages__block {
 position: relative;
 max-width: 400px;
 height: 250px;
 margin: 0 auto;
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 overflow: hidden;
 padding: 20px;
 box-sizing: border-box;
}

.advantages__block::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 50%;
 transform: translateX(-50%);
 width: 0;
 height: 0;
 border-left: 20vw solid transparent;
 border-right: 20vw solid transparent;
 border-top: 12vw solid #f0f0f0; /* цвет фона страницы */
 z-index: 1;
}

/* Мобильная корректировка */
@media (max-width: 480px) {
 .advantages__block {
 max-width: 100%;
 }
 .advantages__block::after {
 border-left: 25vw solid transparent;
 border-right: 25vw solid transparent;
 border-top: 15vw solid #f0f0f0;
 }
}

Копипаст в JSBin — увидите: вырез следует за шириной, без пиксельного ада. Ширина блока меняется? Треугольник подстраивается. Волшебство псевдоэлемента after css.

Хотите анимацию? Добавьте transition: all 0.3s — плавный ресайз.

Дополнительные трюки с псевдоэлементом after css

Псевдоэлемент after css не только для вырезов. Комбо с ::before — двойной эффект. Или SVG внутри content: url('data:image/svg+xml...'), но проще border.

Трюк 1: Несимметричный вырез.

border-left: 15vw solid transparent;
border-right: 30vw solid transparent;

Трюк 2: Многоугольник без clip-path — stack’те несколько ::after/ ::before.

Трюк 3: Тень для глубины.

box-shadow: inset 0 -10px 20px rgba(0,0,0,0.1);

Из Stack Overflow — тонны идей. Но базовый css after покрывает 90% кейсов.

А если блок floated? position: relative спасёт.

Сравнение методов: когда выбрать ::after

Выбирайте ::after, если форма простая. Для кривых — Canvas, но это overkill.

В проектах видел: треугольник css быстрее рендерится, меньше CSS-парсинга.

Источники

1. JSBin пример выреза — исходный код вопроса.
2. MDN: ::after и псевдоэлементы css — официальная документация.
3. CSS-Tricks: Как сделать треугольник css — классический гайд по border-трюкам.
4. Clippy: Clip path generator — инструмент для сравнения.
5. Stack Overflow: Transparent triangle — обсуждение responsive вырезов.

Заключение

Css after с треугольником из transparent border — топ-решение для выреза в .advantages__block: responsive, без цвета, лёгкое. Забудьте clip path css для простых задач — vw и % сделают магию на всех экранах. Возьмите код выше, вставьте в проект — и блок засияет зазором. Экспериментируйте, добавляйте анимации. Если застрянете — DevTools в помощь.