Не проходит проверку, уже замучалась Т_Т
Объясните идиоту, что не так:
1)Верхнему правому квадрату задайте градиент под углом 225°
/* Цвета: белый 30% прозрачности, прозрачный, белый 30% прозрачности, прозрачный */
.square-top-right {
background-image: linear-gradient( 225deg,
rgba(255, 255, 255, .3) 25%,
transparent 25%,
rgba(255, 255, 255, .3) 50%,
transparent 50%,
rgba(255, 255, 255, .3) 75%,
transparent 75%);
}
Не говорите о себе так.
Сейчас разберёмся. Когда вы открыли страницу с заданием, то могли заметить, что два фрагмента уже сделаны.
Возьмем один из них для примера.
Будем разбирать каждую строчку.
Первая строка - это угол, на ней останавливаться не будет.
Нас больше интересует сам градиент. Условно он состоит из четырех достаточно четких полос.
Мы посмотрим, как они получаются.
Первая полоса (треугольник) и первая строка в коде:
rgba(255, 255, 255, .2) 25%,
Это белый цвет с прозрачностью 0,2 и он занимает 25% по ширине.
Дальше нам нужна четкая линия (резкий переход одного цвета в другой). Если вы внимательно читали теорию https://htmlacademy.ru/courses/70/run/9, то знаете, что четкая линия получается, если у одного и у второго цвета в градиенте одинаковый “колорстоп”.
Именно поэтому следующая строка кода
transparent 25%,
Полностью прозрачный цвет. Число 25% показывает, из какой позиции он начинается - как раз с той, где заканчивается белый.
Дальше нам нужно указать, какой ширины будет полностью прозрачный цвет. Все фрагменты в данном случае одинаковы по ширине. Значит его ширина тоже 25%. Прибавляем 25% и получаем новый “колорстоп”. Третья строка кода:
transparent 50%,
Полностью прозрачный цвет заканчивается ровно посередине квадрата.
Следующая полоса белая с прозрачностью 0,2 и линия между цветами тоже четкая, поэтому колорстоп будет такой же как у transparent - 50%:
rgba(255, 255, 255, .2) 50%,
Теперь нам нужно указать, где заканчивается белая полоса. Снова прибавляем 25%.
Новый колорстоп - 75%, предпоследняя строка кода:
rgba(255, 255, 255, .2) 75%,
Остался последний фрагмент. Полностью прозрачный. Линия также четкая, значит начинается он с той позиции, где закончился предыдущий:
transparent 75%
По аналогии с этим примером, вы сможете сделать свой.
Надеюсь, у меня получилось вам кое-что объяснить, а не еще больше запутать)
Получилось) Спасибо!