Линейный градиент создает неровные края на фоновом изображении: как сгладить линию

В попытке создать заостренный нижний край изображения , можно выбрать создание двух чувствительных треугольников в основании. Однако добиться плавной линии в таком дизайне может оказаться непросто. Как упоминалось в исходном вопросе, линейный градиент, используемый для этой цели, имеет тенденцию иметь неровные края из-за своего «жесткого» поведения.

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

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

.lefttriangle {
  ...
  background-image: linear-gradient(to right top, #ffffff 48%, transparent 50%);
}

.righttriangle {
  ...
  background: linear-gradient(to left top, #ffffff 48%, transparent 50%);
}

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