Ваша самая главная ошибка в том, что вы поменяли размер градиента (фонового изображения). В исходном варианте было 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;
}
Это пример с координатами, предложенными в задании. Есть и другие варианты.
Если я что-то упустила или нужно подробнее расписать отдельные моменты, то напишите.