CSS帶折線的直線是一種在網頁設計中常見的線條樣式，它可以為網頁增添美觀的視覺效果。下面介紹兩種通過CSS實現帶折線的直線的方法。

/* 方法一：使用背景圖實現 */
.line {
background: url(images/line.png) repeat-y;
background-position: 50% 0;
height: 100px;
width: 2px;
}
/* 方法二：使用:before和:after偽元素實現 */
.line-wrapper {
position: relative;
height: 100px;
}
.line-wrapper:before,
.line-wrapper:after {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 1px;
height: 100%;
background-color: #000;
}
.line-wrapper:before {
transform: translateX(-50%) translateY(-10px);
border-top: 10px solid #000;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
.line-wrapper:after {
transform: translateX(-50%) translateY(10px);
border-bottom: 10px solid #000;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}

方法一使用背景圖作為線條的紋理，需要準備一張透明區域為線條形狀的png圖片。方法二則使用:before和:after偽元素，利用transform、border和position屬性形成線條的折線效果。