Вопрос по тестам курса: Линейные градиенты

Добрый день.

Вопрос по прохождению тестового задания № [11/23] курса Линейные градиенты / Испытание: флаги.
(пишу текстом, поэтому придётся открыть это задание: http://htmlacademy.ru/courses/70/run/11)

Задача - оформить градиентами второй флаг - .trinidad.

По сути - там 3 чередующихся цвета, идущие по порядку:

  1. много красного;
  2. кусочек белого;
  3. широкая чёрная полоса;
  4. кусочек белого;
  5. много красного.

Моя логика такова - устанавливаю направление в 45deg и пропорции каждому цвету по порядку, согласно моей логике, описанной чуть выше.

Получаем синтаксис:
.trinidad{
background-image:linear-gradient(45deg,#CE1126 33%,#FFF 3%,#000 13%,#FFF 3%,#CE1126 33%);
}

Выходит абракадабра, ад и пакистан.
Почему?
Видел правильный ответ, но не понимаю как он работает.
Просьба растолковать где ошибка в моей логике.

Заранее благодарен!
cat

Также, на htmblbook написано:

Чтобы точно позиционировать цвета в градиенте, после значения цвета указывается его положение в процентах, пикселах или других единицах. Например, запись red 0%, orange 50%, yellow 100% означает, что градиент начинается с красного цвета, затем на 50% переходит в оранжевый, а затем до конца в жёлтый. Для простоты крайние единицы вроде 0% и 100% можно не писать, они подразумеваются по умолчанию. В примере 3 показано создание градиентной кнопки, в которой положение второго цвета из трёх задано как 36%.

затем на 50% переходит…на пятидесяти процентах чего? не могу въехать.
если я пропишу yellow 50% - то половина фигуры по этой логике должна стать жёлтой, но это не так.

почему?

Проценты в синтаксисе это не «длина» градиента к процентах, а указание, как должен градиент меняться в пределах 100%. То есть,

означает, что на 0%, то есть в начале градиента, он начнётся с красного, потом когда дойдёт до середины, то есть 50%, должен стать оранжевым, и в конце, то есть на 100%, он переходит в жёлтый. В общем, эти проценты — это не сумма всех процентов, а как бы «карта» градиента.

2 лайка

супер-объяснение, спасибо!)

1 лайк