
Адаптивный треугольник в CSS
Рассмотрим варианты, как сделать треугольник, который смотрит вниз, с помощью CSS, используя псевдоэлемент «after»
Вы можете посмотреть видео или сразу перейти к финальному коду, он в конце статьи. Также, в текстовом виде описаны все ключевые моменты.
Задача: сверстать адаптивный треугольник на чистом CSS
Обратился ко мне знакомый дизайнер и спросил, как бы я сверстал вот такую плашку с адаптивным треугольником.

Плашка с адаптивным треугольником, которую нужно сверстать
border
. Но этот способ нам не подходит, потому что бордер нельзя сделать адаптивным. Это свойство не поддерживает процентные значения.
Лучше использовать фоновый градиент. Мы будем созадавать треугольник через псевдоэлемент ::after
.
Код изначальной заготовки:
.title {
font-family: sans-serif;
font-weight: normal;
padding: 5% 2rem 0;
background-color: #29cb75;
text-align: center;
color: #fff;
border-radius: 2px;
position: relative;
}
.title::after {
content: '';
width: 100%;
position: absolute;
top: 100%;
left: 0;
}
Отрисовка треугольника
Всё, что описано ниже, применяем к .title::after
.
Сразу сделаем одну половинку треугольника, с заливкой в правый верхний угол. Наполовину прозрачной, наполовину зелёной.
Нам нужно, чтобы фон заполнялся на половину и начинал отрисовываться слева. Так и указываем: начинай отображаться слева, займи 50% по ширине и не повторяйся.
background:
linear-gradient(to right top, transparent 50%, #29cb75 50%) left / 50% 100% no-repeat;
То же самое проделаем со второй половинкой.
background:
linear-gradient(to right top, transparent 50%, #29cb75 50%) left / 50% 100% no-repeat,
linear-gradient(to left top, transparent 50%, #29cb75 50%) right / 50% 100% no-repeat;
Вроде бы всё хорошо, но нет. При масштабировании на стыке появляется белый глюк.
Исправим его небольшим костылём. добавив чуть больше процентовки, чтобы треугольники наслаивались друг на друга.
background:
linear-gradient(to right top, transparent 50%, #29cb75 50%) left / 50.025% 100% no-repeat,
linear-gradient(to left top, transparent 50%, #29cb75 50%) right / 50.025% 100% no-repeat;
Пишите в комментариях, если знаете способ без костыля.
Таким же макаром можно избавиться и от неприятной лесенки. Только теперь добавим плавный переход в пол процента, между прозрачным и зелёным цветом.
background:
linear-gradient(to right top, transparent 49.5%, #29cb75 50%) left / 50.025% 100% no-repeat,
linear-gradient(to left top, transparent 49.5%, #29cb75 50%) right / 50.025% 100% no-repeat;
И чтобы треугольник адаптировался пропорционально, воспользуемся свойством padding-top
, с процентным значением.
padding-top: 5%;
В макете у плашки скруглённые углы, сделаем их и в CSS. Добавим border-radius
.
И теперь наш треугольник создаёт маленькие артефакты. Чтобы от них избавиться, уменьшим размер треугольника на величину скругления углов — те самые 2 пикселя, слева и справа. И не забудем отключить ширину 100%.
Подгоняем нужное значение отступов внутри плашки и готово.
See the Pen
Адаптивный треугольник CSS by JediCSS (@naykris)
on CodePen.
Если у вас есть идеи, как решить эту задачу проще, напомню — только при помощи CSS, поделитесь решением.
И пишите, если у вас тоже есть интересные задачки.