如何在我的文章列表周围设置一个像蛇一样左右移动的边界

实现这一功能的一个巧妙方法是使用像::before或::after这样的伪元素，在这些伪元素中，可以在边上显示偏移的边界，而在依赖长方体模型时根本无法实现这一点。

它看起来是这样的：

.article-container {
position: relative;
padding: 10px;
}
.article-container:not(:last-child) {
margin-bottom: -5px;
}
.article-container::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
border-top: 5px solid #df9b35;
border-bottom: 5px solid #df9b35;
}
.article-container.left {
padding-left: 30px;
}
.article-container.left::before {
right: 50px;
left: 0;
border-left: 5px solid #df9b35;
border-radius: 50px 0 0 50px;
}
.article-container.right {
padding-right: 30px;
}
.article-container.right::before {
left: 50px;
right: 0;
border-right: 5px solid #df9b35;
border-radius: 0 50px 50px 0;
}

<section>
<div class="article-container left">
<article class="card-container time-item">
<header>
<h1>Article 1</h1>
<time datetime="2022-08-18 15:55">18 August</time>
</header>
<p>Short description here</p>
</article>
</div>
<div class="article-container right">
<article class="card-container time-item">
<header>
<h1>Article 2</h1>
<time datetime="2022-08-18 16:00">18 August</time>
</header>
<p>Short description here</p>
</article>
</div>
<div class="article-container left">
<article class="card-container time-item">
<header>
<h1>Article 3</h1>
<time datetime="2022-08-18 16:05">18 August</time>
</header>
<p>Short description here</p>
</article>
</div>
</section>

所有.article-container上的相对定位对这一点至关重要，负的下边缘使其顶部和底部边界对齐。

这里有一个解决方案，我从div中删除了左边界和右边界，并添加了伪元素，这些元素也包含边界"曲线"；。需要对位置等进行一些调整，并且(如果你希望线的最后一个元素一直通向容器的一侧(，尤其是最后一个: before元素，这取决于它是左元素还是右元素，所以你可能需要额外调整。

.article-container {
padding: 10px 0;
border-top: 5px solid #df9b35;
border-bottom: 5px solid #df9b35;
position: relative;
left: 40px;
width: calc(100% - 80px);
}
.article-container:nth-child(n+2) {
margin-top: -5px;
}
.article-container.left:first-child:before {
position: absolute;
content: '';
top: -5px;
right: -40px;
height: 100%;
width: 40px;
border-top: 5px solid #df9b35;
}
.article-container.left:after {
position: absolute;
content: '';
top: -5px;
left: -40px;
height: 100%;
width: 40px;
border-radius: 50px 0 0 50px;
border-left: 5px solid #df9b35;
border-top: 5px solid #df9b35;
border-bottom: 5px solid #df9b35;
}
.article-container.right:after {
position: absolute;
content: '';
top: -5px;
right: -40px;
height: 100%;
width: 40px;
border-radius: 0 50px 50px 0;
border-right: 5px solid #df9b35;
border-top: 5px solid #df9b35;
border-bottom: 5px solid #df9b35;
}
.article-container.left:last-child:before {
position: absolute;
content: '';
top: 0px;
right: -40px;
height: 100%;
width: 40px;
border-bottom: 5px solid #df9b35;
}

<section>
<div class="article-container left">
<article class="card-container time-item">
<header>
<h1>Article 1</h1>
<time datetime="2022-08-18 15:55">18 August</time>
</header>
<p>Short description here</p>
</article>
</div>
<div class="article-container right">
<article class="card-container time-item">
<header>
<h1>Article 2</h1>
<time datetime="2022-08-18 16:00">18 August</time>
</header>
<p>Short description here</p>
</article>
</div>
<div class="article-container left">
<article class="card-container time-item">
<header>
<h1>Article 3</h1>
<time datetime="2022-08-18 16:05">18 August</time>
</header>
<p>Short description here</p>
</article>
</div>
</section>