Ваша самая главная ошибка в том, что вы поменяли размер градиента (фонового изображения). В исходном варианте было background-size: 115px 115px;
А дальше цвета в градиентах наоборот написали и координаты background-position предложенные конечно не подошли.
Это одно из самых сложных на мой взгляд заданий. Ему давно требуется разбор.
Попробуем.
Вы правильно определили, что сюрикен строится из градиентов серого и черного цветов в сочетании с прозрачным.
Однако размер цветных треугольников вы не посчитали. Это 25px.
Будет проще для понимания, если каждый градиент представить отдельно с заменой прозрачного цвета на любой другой.
Вот что получается:
(прозрачный цвет заменен другим для наглядности)
Элемент (сюрикен) составляется совмещением цветных частей вовнутрь и прозрачными частями наружу с помощью предложенных координат.
Полный вариант кода:
.pattern {
height: 100%;
background-size: 115px 115px;
background-image:
linear-gradient(45deg, #555555 25px, transparent 25px),
linear-gradient(315deg, #555555 25px, transparent 25px),
linear-gradient(135deg, #555555 25px, transparent 25px),
linear-gradient(225deg, #555555 25px, transparent 25px),
linear-gradient(45deg, #000000 25px, transparent 25px),
linear-gradient(225deg, #000000 25px, transparent 25px);
background-repeat: repeat;
background-position:
70px -45px,
-45px -80px,
35px 70px,
-80px 35px,
35px -45px,
-45px 35px;
}
Это пример с координатами, предложенными в задании. Есть и другие варианты.
Если я что-то упустила или нужно подробнее расписать отдельные моменты, то напишите.
В размерах фона ничего менять не надо. Мне это задание сложным не показалось, после того, как я в тетради нарисовал систему координат и проставил точки позиций. Отталкиваясь от них, становиться просто расставлять нужные квадраты. Попробуйте
C размерами элементов не понял. Пересмотрел прошлую тему с background-position с отр. значениями и в тупике. Почему у указанного элемента отр. значение по y?
Background-position были даны изначально для всех элементов. Разве в данном случае есть разница на каком месте элемент стоит, если под него ставить background-position. Мне непонятны отрицательные значения по оси y. Что-то я элементарное упускаю:grinning:
Может быть, кому-то поможет моё видение загвоздки, хотя Ineska уже подробно описала в картинках, и именно её объяснение мне дало сразу понимание. Здесь не 2 цвета градиентов, а ТРИ!! Те 2, что указаны в задании, и transparent!! И градиенты нужно строить не по этим 2-м цветам, а каждый из 2-х указанных с transparent. В итоге мы имеем 4 треугольника серый/transparent, которые образуют края сюрикена, и 2 чёрных треугольника (опять же, градиент “чёрный/transparent”), которые, соприкасаясь гипотенузами в центре, формируют чёрный квадрат-центр. Градиентов серый/чёрный в этом задании НЕТ!! Для большей наглядности можно заменить временно transparent на какой-нибудь видимый цвет, чтобы сопоставить части.
Потому-что так задано в градусах. Проверил повторно и убрал остальные свойства - правый верхний угол (без значений background-position).
Но вопрос больше, почему градиент вообще появляется не в контейнере
Скорее всего вы не совсем понимаете, как построен каждый градиент. На вашем рисунке слева, где перечислены все градиенты, кроме серого треугольничка в рамку взята белая область (прозрачная). Попробуйте заменить в градиентах прозрачный цвет на какой-то другой, более заметный, чтобы видеть все эти квадраты.
