如何在兩端的Background repeat-x設置上使用CSS作為“Left Slanted Stripe”

Question

我正在嘗試使用 CSS 制作左斜條紋。

我不知道如何使兩端不像我附上的下圖那樣清楚地顯示出來。

左斜條紋的想法

我可以重復使用 CSS 計算圖像數量嗎？

我能得到一些幫助嗎？

 .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, .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

您可以將條紋背景和灰色背景放在偽元素之前和之前，然后將條紋剪掉，以便去除兩端的奇數位條紋。

注意：此處的寬度基於條紋圖像的斜率/相對大小。 例如，如果更改了字體大小，事情將正常縮放（事實上，如果您將字體大小設置為 .stripe 中的較大值，您可以檢查剪輯是否工作得更好）。

 .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>