С повторением понял, спасибо!
Если не просто стереть координаты, а написать background-position: 0 0; , то будет так, как вы хотели. В чем разница между отсутствующими координатами и обнуленными - не знаю, ведь значение по умолчанию и есть 0 0.
1 лайк
Объясните пожалуйста, по какому принципу в данном случае работает background-position? 18/23 прошла, но так и не поняла принципа перемещения фона 
Соответственно застряла на 22/23 именно на этом моменте - не понимаю откуда идет отсчет и что именно перемещается - квадрат?
UPD: вот стоило написать сюда и сразу все стало понятно, что куда и как двигается 
… не туда добавилось у меня что то сообщение
Вроде разжевано, но тот случай, когда все равно непонятно )
Что конкретно не понятно?
Пришлось разобраться) На самом деле задание простое, сначала было непонятно откуда берется отсчет. Но как только понял, что все градиенты рисуются из углов квадрата 115х115, дальше стало понятно.
3 лайка
Спасибо за разъяснение - пазл начал собираться в голове, но я все же не очень хорошо поняла как определить размер треугольников (25px). Не могли бы вы направить меня на решение.
Размер треугольника можно определить с помощью линейки в инструментах разработчика в любом браузере. Панель с инструментами открывается нажатием клавиши F12.
1 лайк
Можно ли в этом задании собрать сюрикен по частям, а потом размножить его? (т.е. 4 угла + черный квадрат) и всему этому задать repeat: repeat? Я так пытался, у меня не получилось, вероятно потому что repeat задается 1ой части ,а не целому сюрикену.
Так и нужно было сделать. Покажите свой код.
У меня получилось со 2го раза, я подсмотрел уже выложенную логику на форуме и собрал, накладывая разные фоны-градиенты. А изначально хотел уменьшить черный квадрат в центре с помощью background-size до 40px и приставлять по бокам сюрикены (тоже 40px), но background-repeat в этом случае работал некорректно)
1 лайк
интересно, почему бы не использовать
background-image:linear-gradient(#000000,#000000)
.pattern {
height: 100%;
width: 100;
background-size: 115px 115px;
background-repeat: repeat;
background-image:
linear-gradient(45deg, #555555 25px, transparent 25px),
linear-gradient(135deg, #555555 25px, transparent 25px),
linear-gradient(225deg, #555555 25px, transparent 25px),
linear-gradient(315deg, #555555 25px, transparent 25px),
linear-gradient(135deg, #000000 25px, transparent 25px),
linear-gradient(315deg, #000000 25px, transparent 25px);
background-position:
70px -45px,
35px 70px,
-80px 35px,
-45px -80px,
35px 35px,
-45px -45px;
Хвала великим силам, сам подобрал и сразу 100%
1 лайк
А объяснить можете это позиционирование? Никак не пойму эти точки…
как подбирать deg? и пиксели?
Или как сказано выше - с помощью встроенной линейки, или на глаз. Мне удобнее второй вариант, тем более что в заданиях числовые параметры обычно кратны 5 или 10.
А градусы - тоже просто: диагональ квадрата - это 45 градусов (фон квадрат, ибо у него высота и ширина равны), соответственно нам подойдет в этом случае 45 градусов или to top right, to top left, to bottom right/left (ибо диагонали в этом случае совпадают с 45 градусами).
Очень помогли Ваши объяснения!) по-началу думал, что тяжело, но теперь все понял и быстро все сделал. И еще хорошо, что координаты уже есть, так пришлось бы помучиться.
Да, вся проблема состояла в том, что изначально не очевидно, что треугольнички - это уголки одного фона 115рх-115рх.
Я сначала решил, что каждый треугольник - это разрезанный пополам по диагонали фон 115рх-115рх, затем изменил его размер и пошло-поехало… Потом долго психовал оттого, что треугольники не хотели вставать пиксель в пиксель с примером, и от того, что “background-position из подсказки оказался бесполезным”)))
1 лайк