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

194

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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

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

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

187

HTML

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

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

213

HTML

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

214

HTML

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

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

239