Размеры треугольников можно и в процентах подобрать…
Отличное испытание. Очень понравилось. Пока не понял что нужно из “откусаных уголков” собрать, даже не знал с чего начать))
/*
Используемые цвета: #000000 и #555555
Используемые значения background-position для частей сюрикенов:
70px -45px,
-45px -80px,
35px 70px,
-80px 35px,
35px -45px,
-45px 35px
*/
.pattern {
height: 100%;
background-image:
linear-gradient(45deg, #555 15.4%, transparent 15.4%),
linear-gradient(315deg, #555 15.4%, transparent 15.4%),
linear-gradient(135deg, #555 15.4%, transparent 15.4%),
linear-gradient(225deg, #555 15.4%, transparent 15.4%),
linear-gradient(45deg, #000 15.4%, transparent 15.4%),
linear-gradient(225deg, #000 15.4%, transparent 15.4%);
background-size: 115px 115px;
background-repeat: repeat;
background-position:
70px -45px,
-45px -80px,
35px 70px,
-80px 35px,
35px -45px,
-45px 35px;
}
body {
min-width: 565px;
min-height: 298px;
background-image: url(“bamboo.jpg”);
background-repeat: repeat;
background-position: 0 0;
}
html,
body {
margin: 0;
height: 100%;
}
Тоже много времени понадобилось, чтобы даже с подсказками разобраться. Как и многие тут советовали, добавьте второй яркий цвет для понимания. Нарисуйте на бумаге, как по градусам будет двигать треугольник (45 + 90). Мне показалось проще зеркально отражать треугольники минусовым deg. И если на бумаге не совсем поняли, то не забывайте двигаться снизу вверх в объявлении новых linear-gradient и position. Плюс обнуляйте новый position, чтобы понять , где треугольник в начальной позиции и куда его двигать:
.pattern {
height: 100%;
background-image:
linear-gradient(45deg,#555555 25px, transparent 25px),
linear-gradient(-45deg, #555555 25px, transparent 25px),
linear-gradient(135deg,#555555 25px, transparent 25px),
linear-gradient(-135deg,#555555 25px, transparent 25px),
linear-gradient(-135deg, #000000 25px, transparent 25px),
linear-gradient(45deg, #000000 25px, transparent 25px);
background-size: 115px 115px;
background-repeat: repeat;
background-position:
70px -45px,
-45px -80px,
35px 70px,
-80px 35px,
-45px 35px,
35px -45px
}
1 лайк
У меня этот код сработал! Спасибо за информацию.
Это задание одно из немногих показалось сложным
О как…
У меня ошибка была, что я брал сначала прозрачный, потом основной цвет (а тут наоборот). Соответственно градусы у меня были тоже наоборот. И когда вставлял размеры - не совпадало ничего.
Пример первого:
linear-gradient(225deg, transparent 140px, #555555 140px),
Прикол в том, что при 140px слишком мало, а при 135px слишком много. Как итог: кратность 5 не соблюдается.
Я уже хотел бочку на создателей задания катить =D