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

На всякий случай напомню как это выглядит:

Существует несколько вариантов создания такого визуального решения, в том числе с помощью растровых изображений или svg, но я считаю, что использование линейного градиента в данном случае имеет ряд преимуществ, в том числе:

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

Но есть и проблема - наклонный линейный градиент провоцирует появление “зазубрин” по линии соприкосновения цветов.

Выглядит это приблизительно так:

Решение кроется в одном маленьком трюке.

Обычно, для градиента с контрастным переходом мы пишем такой код:

linear-gradient(176deg, white, white 75%, black 75%, black 100%);

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

Чтобы избежать такую неприятность, достаточно добавить десятичные значения для второго блока в градиенте - это позволит получить эффект сглаживания результирующего изображения (десятичную составляющую необходимо подобрать экспериментальным путем):

background: linear-gradient(176deg, white, white 75%, black 75.3%, black 100%);

Еще один вариант решения данной проблемы имеет следующий вид:

background: linear-gradient(176deg, white, white 75%, black calc(75% + 1px), black 100%);

Пример на codepen:

Спасибо за внимание.