Сюрикены

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

Добрый день.

Подскажите пожалуйста почему у меня размеры не кратные 5?

.pattern {
height: 100%;
background-size: 115px 115px;
background-repeat: repeat;
background-image:
linear-gradient(to left bottom, transparent 136px, #555555 135px),
linear-gradient(to right top, transparent 137px, #000000 135px),
linear-gradient(to left bottom, transparent 137px, #000000 135px),
linear-gradient(to right top, transparent 136px, #555555 135px),
linear-gradient(to left top, transparent 136px, #555555 135px),
linear-gradient(to right bottom, transparent 136px, #555555 135px);

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 {

2

Чтобы было и 100%, и кратность не нарушалась нужно перекрашивать наоборот: от тёмного к прозрачному.

3

.pattern {
height: 100%;
background-size: 115px 115px;
background-repeat: repeat;
background-image:
linear-gradient(to right top, #555555 25px, transparent 25px),
linear-gradient(to left bottom, #000000 25px, transparent 25px),
linear-gradient(to right top, #000000 25px, transparent 25px),
linear-gradient(to left bottom, #555555 25px, transparent 25px),
linear-gradient(to right bottom, #555555 25px, transparent 25px),
linear-gradient(to left top, #555555 25px, transparent 25px);
background-position:
70px -45px,
-45px -80px,
35px 70px,
-80px 35px,
35px -45px,
-45px 35px;
}

Кратность 5, но теперь 99%. По углам центрального квадрата есть небольшие огрехи и я, хоть убей, не могу понять почему они получились. Сделал от темного к прозрачному, размеры в пикселях уменьшились, а вот результат ухудшился)

Все, отбой. Если поменять порядок градиент, то эти уголки исчезают:
linear-gradient(to right top, #555555 25px, transparent 25px),
linear-gradient(to left top, #555555 25px, transparent 25px),
linear-gradient(to right bottom, #555555 25px, transparent 25px),
linear-gradient(to left bottom, #555555 25px, transparent 25px),
linear-gradient(to right top, #000000 25px, transparent 25px),
linear-gradient(to left bottom, #000000 25px, transparent 25px);