CSS Фон Градиент Pattern - пунктирные линии

Question

Я хочу воссоздать фоновый рисунок на https://meta.stackexchange.com/ и задавался вопросом, возможно ли это с помощью градиентов CSS?

Я сумел сделать квадраты, но добавление пунктирные линии оказывается хлопотно.

background-color: #16A6DA; 
background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent); 
background-size:50px 50px; 

http://jsfiddle.net/04fjos8x/

Answer 1

Ну его не смысловая, но его то, что вы просили я думаю:

http://cssdeck.com/labs/full/zfogyyuf

Я создал много пустых дивы и добавлены границы к этим дивы. Использование границ divs, созданных с использованием только HTML & CSS дизайн, как вы просили.

Возможно, некоторые jQuery/Javascript можно было использовать там, чтобы «бесконечно» создавать новые пустые div, но я не хотел использовать javascript, так как это был простой пример.

Answer 2

Предлагаю вам ознакомиться с приведенными ниже ссылками. Это генераторы CSS, которые могут сэкономить вам некоторое время. Надеюсь, они вам помогут.

Ultimate CSS Gradient Generator

Linear gradients

CSS background patterns - this is good

Answer 3

http://jsfiddle.net/04fjos8x/1/

Применить вашу первоначальную сетку на ваш HTML затем применить это к вашему телу:

body { 
width: 100%; 
background-image: linear-gradient(0deg, transparent 24%, rgba(22, 166, 218, 1) 25%, rgba(22, 166, 218, 1) 26%, transparent 27%, transparent 74%, rgba(22, 166, 218, 1) 75%, rgba(22, 166, 218, 1) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(22, 166, 218, 1) 25%, rgba(22, 166, 218, 1) 26%, transparent 27%, transparent 74%, rgba(22, 166, 218, 1) 75%, rgba(22, 166, 218, 1) 76%, transparent 77%, transparent); 
background-size: 10px 10px; 
height: 100%; 
} 

Убедитесь, что ваш html имеет ширину и высоту, равную 100%.

В основном применяет синие линии поверх белых линий на меньшем расстоянии (размер фона).