Растерялась

ребят, что-то я совсем растерялась. Подскажите пожалуста как их делить на треугольники, или может логику правильную для этого испытания…

В испытании используются градиенты “черный с прозрачным” и “серый с прозрачным”. Только эти сочетания. Также помните о четких границах между цветами (для этого колорстопы цветов должны быть одинаковыми там, где один цвет переходит в другой).

да это я как-бы понимаю… но как мне предположим правильно в этих блоках разметить трегульники…? надеюсь не слишиком глупо поставила вопрос)

Фон заполняется квадратами 115px * 115px.
В каждом из таких квадратов нужно собрать сюрикен.

Ваша задача покрасить квадрат в два цвета чтобы получился треугольник.
Красить нужно по диагонали.

2018-08-04_132327

background-image: linear-gradient(to right top, #555 25px, transparent 25px);

Теперь ставите треугольник в нужное место:

background-position: 70px -45px;

И так 6 раз…
меняете направление градиента и цвет…

3 лайка

Без подсказки не разобрался бы наверное, снова считаю слишком замудренное неоправданно задание :frowning:

жестоко
/*
Используемые цвета: #000000 и #555555
Используемые значения background-position для частей сюрикенов:

70px -45px, 
-45px -80px, 
35px 70px, 
-80px 35px, 
35px -45px, 
-45px 35px
*/

.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 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);
    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;
}