Как можно сделать фон штриховкой на CSS/HTML?

166
10 июля 2018, 20:00

Можно ли сделать такой штрих, если да, то как

Answer 1

Можно, используя градиент

.dash { 
  height: 30px; 
  background: repeating-linear-gradient(-60deg, #555 0, #555 1px, transparent 1px, transparent 5px); 
}
<div class="dash"></div>

Answer 2

Рисуете свою полоску в SVG, генерируете data:uri, вставляете на повторяющийся фон. Никаких артефактов, векторный фон готов:

.dash { 
  height: 30px; 
  background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNHB4IiBoZWlnaHQ9IjRweCIgdmlld0JveD0iMCAwIDQgNCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNCA0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0FCQUJBQiIgc3Ryb2tlLXdpZHRoPSIwLjUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjAiIHkxPSIwIiB4Mj0iNCIgeTI9IjQiLz4NCjwvc3ZnPg0K"); 
  background-repeat:repeat; 
  background-position:0 0; 
  background-size:4px 4px; 
}
<div class="dash"></div>

READ ALSO
Хочу сделать табы на WP
HTML

Хочу сделать табы на WP

Хочу сделать табы на WordPress, но чтобы в самих табах была основная инфа, а когда нажать, то выезжает меню вниз

 154
Как подключить к кнопке элемент?
HTML

Как подключить к кнопке элемент?

Как подключить к кнопке элемент? Делаю через visual composer, и надо чтобы элемент выезжал, по нажатию кнопки, но то что выезжает, это отдельный ряд,...

 183
Можно ли тегу img задать class?
HTML

Можно ли тегу img задать class?

Можно ли тегу img задать class?

 185
рандомное целое число в select option
HTML

рандомное целое число в select option

Можно ли сделать так чтоб при выборе например 1-20 задавалась рандомное значение из этого же промежутка и аналогично 20-40, 40-60

 210