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

18
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

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

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

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

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

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

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

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

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

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

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

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

39