Адаптивный треугольник в CSS

Вы можете посмотреть видео или сразу перейти к финальному коду, он в конце статьи. Также, в текстовом виде описаны все ключевые моменты.

Задача: сверстать адаптивный треугольник на чистом 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, поделитесь решением.

И пишите, если у вас тоже есть интересные задачки.