如何在两端的Background repeat-x设置上使用CSS作为“Left Slanted Stripe”

Question

I am trying to making Left Slanted Stripe with CSS.

I don't know how to make both ends not to show clearly like below image that I attached.

ideas for Left Slanted Stripe

Can I repeat as Counting Numbers of Image with CSS?

Can I get some help?

 .stripe { width: 100%; height: 2em; background: slategray; background-image: url(https://i.stack.imgur.com/qVP44.png), url(https://i.stack.imgur.com/ogF3W.png); background-size: 1em, 1em; background-position: left bottom, 0.5em bottom; background-repeat: repeat-x, repeat-x; }

 <div class="stripe"></div>

stripe unit green

stripe unit orange

when adapted to paragraph with span

Adapting A Haworth Answer to ...

It isn't work.. Don't know why the reason...

 .stripe, .stripe::before, .stripe::after { margin: 0; } .stripe { width: 100%; height: 2em; position: relative; margin: 0; nt-size: 50px; } .stripe::before, .stripe::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; z-index: -1; } .stripe::after { height: .72em; /* depends on the slope */ background-image: url(https://i.stack.imgur.com/qVP44.png), url(https://i.stack.imgur.com/ogF3W.png); background-size: 1em, 1em; background-position: left bottom, 0.5em bottom; background-repeat: repeat-x, repeat-x; clip-path: polygon(.72em 0, 100% 0, calc(100% - .72em) 100%, 0 100%); } .stripe::before { background-color: slategray; height: 100%; }

 <h2>in span</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula. Praesent orci dui, pulvinar id convallis a, faucibus non mauris. Donec tellus augue, tempus sed facilisis sed, fringilla quis leo. Mauris vulputate, leo ac facilisis vulputate, enim orci interdum augue, in blandit quam turpis quis dui. <span class="stripe">Morbi dictum luctus velit nec faucibus. Cras vitae tortor purus, ut tincidunt mauris.</span> Sed at velit nisl. Donec eu mauris tortor, interdum condimentum erat. Nam egestas turpis eget nibh laoreet pharetra. Suspendisse a sem eros, ut pulvinar enim. In sed elit eu nulla accumsan tincidunt eget sit amet ipsum. Nullam ut massa rutrum dolor placerat tempor accumsan eget purus.</p> <h2>in div</h2> <div class="stripe">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula. Praesent orci dui, pulvinar id convallis a, faucibus non mauris. Donec tellus augue, tempus sed facilisis sed, fringilla quis leo. Mauris vulputate, leo ac facilisis vulputate, enim orci interdum augue, in blandit quam turpis quis dui. <span class="stripe">Morbi dictum luctus velit nec faucibus. Cras vitae tortor purus, ut tincidunt mauris.</span> Sed at velit nisl. Donec eu mauris tortor, interdum condimentum erat. Nam egestas turpis eget nibh laoreet pharetra. Suspendisse a sem eros, ut pulvinar enim. In sed elit eu nulla accumsan tincidunt eget sit amet ipsum. Nullam ut massa rutrum dolor placerat tempor accumsan eget purus.</div>

Answer 1

You can put the stripey background and the gray background onto after and before pseudo elements, and clip the stripey one so that the odd bits of stripe at the two ends are removed.

Note: the widths here are based on the slope/relative size of the stripey images. Things will scale OK if for example the font-size is changed (in fact, if you put the font-size to something big in .stripe you can check that the clipping is working better).

 .stripe, .stripe::before, .stripe::after { margin: 0; } .stripe { width: 100%; height: 20em; position: relative; margin: 0; nt-size: 50px; } .stripe::before, .stripe::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; z-index: -1; } .stripe::after { height: .72em; /* depends on the slope */ background-image: url(https://i.stack.imgur.com/qVP44.png), url(https://i.stack.imgur.com/ogF3W.png); background-size: 1em, 1em; background-position: left bottom, 0.5em bottom; background-repeat: repeat-x, repeat-x; clip-path: polygon(.72em 0, 100% 0, calc(100% - .72em) 100%, 0 100%); } .stripe::before { background-color: slategray; height: 100%; }

 <div class="stripe"></div>