[22/23] Сюрикены 100%

Курсы §19. Линейные градиенты
1

Доброго времени суток!

Дооолго сидел над этим заданием, в итоге код оказался в разы короче чем я ожидал))

.pattern {
height: 100%;
background-size: 115px 115px;
background-repeat: repeat;
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(45deg, #000000 25px, transparent 25px),
linear-gradient(225deg, #000000 25px, transparent 25px);
background-position:
70px -45px,
-45px -80px,
35px 70px,
-80px 35px,
35px -45px,
-45px 35px;

}

body {
background: url("/assets/course70/bamboo.jpg");
min-width: 555px;
min-height: 298px;
}

html,
body {
height: 100%;
margin: 0;
}

2

Получилось разобраться самостоятельно, но немного отступила от заданных значений background-position. Просто оставлю это здесь:

.pattern {
    height: 100%;
    background-size: 115px 115px;
    background-repeat: repeat;
    background-position:
    70px -45px,
    35px 70px,
    -45px -80px,
    -80px 35px,
    35px 35px,
    -45px -45px;
    background-image: 
      linear-gradient(45deg, #555 25px, transparent 25px), 
      linear-gradient(135deg, #555 25px, transparent 25px),
      linear-gradient(-45deg, #555 25px, transparent 25px),
      linear-gradient(225deg, #555 25px, transparent 25px),
       linear-gradient(135deg, #000 25px, transparent 25px),
       linear-gradient(-45deg, #000 25px, transparent 25px);
}

body {
    background: url("/assets/course70/bamboo.jpg");
    min-width: 555px;
    min-height: 298px;
}

html,
body {
    height: 100%;
    margin: 0;
}
1 лайк