这里有一个使用 border-image 的技术，你考虑从一开始就创建溢出：
.stripe {
border-image:
repeating-linear-gradient(45deg, red 0 10px, blue 0 20px)
fill 0 //0 50vw;
padding: 20px;
color: #fff;
}<div id="container" style="max-width: 1000px; margin: 0 auto;">
<section>
<h1>Containered Content</h1>
<p>
Lorem ipsum ...
</p>
</section>
<section class="stripe">
<h2>My background should overflow the container</h2>
<p>
Lorem ipsum ...
</p>
</section>
</div>为了达到第二部分的背景延伸到 100vw 的“条纹”的预期效果，您可以使用 CSS 网格。
试试这个代码：
<!DOCTYPE html>
<html>
<head>
<style>
#container {
display: grid;
grid-template-columns: 1fr minmax(auto, 100vw) 1fr;
}
section:nth-child(2) {
background-color: black;
}
</style>
</head>
<body>
<div id="container">
<section>
<h1>Containered Content</h1>
<p>
Lorem ipsum ...
</p>
</section>
<section>
<h2>My background should overflow the container</h2>
<p>
Lorem ipsum ...
</p>
</section>
</div>
</body>
</html>