Решение проблемы зазубренных линий в градиентах

[pansom]

Эм… дальше что? Статья про transition: color .3s на ховер?
Это любой верстальщик своей головой додумывает тут же как увидит эти зубы.

[hisbvdis]

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

[pansom]

В 5 классе нам задачу задали, указать любое число между 2 и 1. Я её запомнил на всю жизнь, ибо на неё тогда не ответил и это был столь огромный удар, что я запомнил до сих пор, а меж тем уже 34 годика.
Думаю у вас также такого рода задача была.
Делайте выводы.

[aamonster]

Трудней всего было догадаться, где же на картинке градиент :-)

А как только он там появился (пусть и шириной в 1 пиксель) – всё стало хорошо :-D
Кстати, добавляемое значение можно не подбирать, а вычислить, исходя из 1 пиксела ширины полоски градиента.

[GCU]

У нормальных градиентов нет проблемы с алиасингом

[Error1024]

Это костыль, при изменении размера элемента с градиентом можно получить как обратное «зазубривание», так и размытие на несколько пикселей

[pansom]

Вы сейчас о CSS говорите, тут везде костыли и для любого верстальщика это стандартные вещи. Так то медиа выражения есть.

[amakhrov]

По-моему, с calc() будет более надежно: не зависеть от размеров и угла наклона

linear-gradient(176deg, #A663CC, #A663CC 75%, #6F2DBD calc(75% + 1px))

[pansom]

В IE 11 не пашет, а так да, вариант.

[onground]

У меня в Firefox 70.0.1 (Win 7) это выглядит вот так:

Но в Safari на маке таки да, лестница:

[hisbvdis]

70.0.1 (64-битный) (Windows 10)