在頁面布局中，我們經常需要使用到邊緣折線來裝飾或分割不同的內容區塊。CSS中提供了多種方式來實現邊緣折線。

/* 方式一：使用邊框實現 */
.box {
border: 1px solid black;
border-left: none;
border-right: none;
border-top: none;
border-bottom: none;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
/* 方式二：使用偽元素實現 */
.box::before {
content: "";
position: absolute;
top: 0;
left: 0;
border-top: 1px solid black;
width: 100%;
}
/* 方式三：使用background-image實現 */
.box {
background-image: linear-gradient(to bottom, transparent 0%, transparent calc(50% - 1px), black calc(50% - 1px), black calc(50% + 1px), transparent calc(50% + 1px), transparent 100%);
background-repeat: no-repeat;
}
/* 方式四：使用clip-path實現 */
.box {
clip-path: polygon(
0% 0%,
100% 0%,
100% 50%,
calc(100% - 1px) 50%,
calc(100% - 1px) calc(50% + 1px),
50% calc(50% + 1px),
50% 100%,
0% 100%
);
}

以上四種方式，都可以實現各種風格的邊緣折線。選擇哪種方式，取決于具體的需求和代碼實現難度。