Построение градиент фона с плитками

Question

Я пытаюсь для того чтобы достигнуть следующего фона в HTML/CSS:

я искал способы, чтобы сделать градиенты уже, но я нашел только гладкие градиенты, не могли найти плитки на основе градиентов. Я решил попробовать сделать этот градиент с flexboxes (см следующий фрагмент кода:

div.s-t-numbers-background { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 
div.s-t-numbers-background-column { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
div.s-t-numbers-background-tile { 
 
    background-color: #FFFAAA; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="s-t-numbers-background"> 
 
    <div class='s-t-numbers-background-column'> 
 
    <div class='s-t-numbers-background-tile'>tile</div> 
 
    <div class='s-t-numbers-background-tile'>tile</div> 
 
    <div class='s-t-numbers-background-tile'>tile</div> 
 
    <div class='s-t-numbers-background-tile'>tile</div> 
 
    </div> 
 
    <div class='s-t-numbers-background-column'> 
 
    <div class='s-t-numbers-background-tile'>tile</div> 
 
    <div class='s-t-numbers-background-tile'>tile</div> 
 
    <div class='s-t-numbers-background-tile'>tile</div> 
 
    <div class='s-t-numbers-background-tile'>tile</div> 
 
    </div> 
 
    <div class='s-t-numbers-background-column'> 
 
    <div class='s-t-numbers-background-tile'>tile</div> 
 
    <div class='s-t-numbers-background-tile'>tile</div> 
 
    <div class='s-t-numbers-background-tile'>tile</div> 
 
    <div class='s-t-numbers-background-tile'>tile</div> 
 
    </div> 
 
    <div class='s-t-numbers-background-column'> 
 
    <div class='s-t-numbers-background-tile'>tile</div> 
 
    <div class='s-t-numbers-background-tile'>tile</div> 
 
    <div class='s-t-numbers-background-tile'>tile</div> 
 
    <div class='s-t-numbers-background-tile'>tile</div> 
 
    </div> 
 
    <div class='s-t-numbers-background-column'> 
 
    <div class='s-t-numbers-background-tile'>tile</div> 
 
    <div class='s-t-numbers-background-tile'>tile</div> 
 
    <div class='s-t-numbers-background-tile'>tile</div> 
 
    <div class='s-t-numbers-background-tile'>tile</div> 
 
    </div> 
 
    <div class='s-t-numbers-background-column'> 
 
    <div class='s-t-numbers-background-tile'>tile</div> 
 
    <div class='s-t-numbers-background-tile'>tile</div> 
 
    <div class='s-t-numbers-background-tile'>tile</div> 
 
    <div class='s-t-numbers-background-tile'>tile</div> 
 
    </div> 
 
</div>

Верхний левый цвет: #8e003f и нижний правый цвет: #f02435 Iwould с удовольствием избегайте делать это с помощью div и используйте CSS, если у кого-то есть трюк.

Answer 1

настроить свои цвета и позиции самостоятельно. Я боюсь, что у этого нет больших браузеров поддержки acros. Упомянутый фоновое изображение будет гораздо лучше (вы можете иметь 6x4px PNG, размер такого файла не большой)

div{ 
 
    width:160px; 
 
    height: 240px; 
 
    border:1px solid; 
 
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='6'><rect fill='#8e003f' x='0' y='0' width='1' height='1'/><rect fill='#8e003e' x='0' y='1' width='1' height='1'/><rect fill='#8e003d' x='0' y='2' width='1' height='1'/><rect fill='#8e003c' x='0' y='3' width='1' height='1'/><rect fill='#8e003b' x='0' y='4' width='1' height='1'/><rect fill='#8e003a' x='0' y='5' width='1' height='1'/><rect fill='#8e003f' x='1' y='0' width='1' height='1'/><rect fill='#9e003d' x='1' y='1' width='1' height='1'/><rect fill='#Ae003b' x='1' y='2' width='1' height='1'/><rect fill='#Ce0038' x='1' y='3' width='1' height='1'/><rect fill='#f02437' x='1' y='4' width='1' height='1'/><rect fill='#f02435' x='1' y='5' width='1' height='1'/><rect fill='#8e003f' x='2' y='0' width='1' height='1'/><rect fill='#Ae003d' x='2' y='1' width='1' height='1'/><rect fill='#C0243b' x='2' y='2' width='1' height='1'/><rect fill='#D02439' x='2' y='3' width='1' height='1'/><rect fill='#E02437' x='2' y='4' width='1' height='1'/><rect fill='#f02435' x='2' y='5' width='1' height='1'/><rect fill='#a0243a' x='3' y='0' width='1' height='1'/><rect fill='#b02439' x='3' y='1' width='1' height='1'/><rect fill='#c02438' x='3' y='2' width='1' height='1'/><rect fill='#d02437' x='3' y='3' width='1' height='1'/><rect fill='#e02436' x='3' y='4' width='1' height='1'/><rect fill='#f02435' x='3' y='5' width='1' height='1'/></svg>"); 
 
    background-size: 100%; 
 
}

<div></div>

Answer 2

ОК, думая об этом, похоже, что таблица сделает трюк, а тем более код html и css для этого. Затем введите цвет фона за ячейка таблицы

<table id="red"> 
    <tbody> 
    <tr> 
    <td>number</td> 
    <td>number</td> 
    <td>number</td> 
    <td>number</td> 
    <td>number</td> 
    <td>number</td> 
    </tr> 
    <tr> 
    <td>number</td> 
    <td>number</td> 
    <td>number</td> 
    <td>number</td> 
    <td>number</td> 
    <td>number</td> 
    </tr> 
    <tr> 
    <td>number</td> 
    <td>number</td> 
    <td>number</td> 
    <td>number</td> 
    <td>number</td> 
    <td>number</td> 
    </tr> 
    <tr> 
    <td>number</td> 
    <td>number</td> 
    <td>number</td> 
    <td>number</td> 
    <td>number</td> 
    <td>number</td> 
    </tr> 
</tbody> 
</table> 

.red { границы коллапса: крах; }

.red тр: п-й ребенок (1) TD: п-й ребенок (1) { фон: темно-красный; }

.red тр: п-й ребенок (1) TD: п-й ребенок (2) { фон: меньше темно-красный; }

и так далее

Если вы используете дерзость вы можете предопределить вам цвета, как константы, которые были бы велики.

Answer 3

Вы можете использовать градиенты, чтобы сделать ваш дизайн в ряд (или колонка). Затем повторите градиент в других строках, компенсируя это шаг:

.test { 
 
    width: 400px; 
 
    height: 300px; 
 
    background-image: 
 
    linear-gradient(to right,yellow 25%, green 25%, green 50%, blue 50%, blue 75%, red 75%),  linear-gradient(to right,yellow 25%, green 25%, green 50%, blue 50%, blue 75%, red 75%),  linear-gradient(to right,yellow 25%, green 25%, green 50%, blue 50%, blue 75%, red 75%),  linear-gradient(to right,yellow 25%, green 25%, green 50%, blue 50%, blue 75%, red 75%); 
 
    background-size: 200% 25%; 
 
    background-position: 0% 0%, 25% 25%, 50% 50%, 75% 75%; 
 
    background-repeat: no-repeat; 
 
    }

<div class="test"></div>