CSS橫折箭頭線是一個常見的UI設計元素，它通常用于展示展開／收起狀態下的效果，也可以用于導航菜單和面包屑。

.arrow {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid #ccc;
position: relative;
}
.arrow:after {
content: "";
position: absolute;
top: -20px;
left: -20px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid white;
}

首先我們使用CSS的border屬性來設置箭頭的樣式。左邊的邊框是透明的，因此它看起來像一個三角形。我們還設置了一個相對定位，以便箭頭的after偽元素可以定位在它的上方。

接下來是箭頭的上部部分。我們使用相同初始設置創建一個透明的三角形，上下兩個三角形將相互重疊，形成一個箭頭。我們還將偽元素的前景色設置為白色，以便覆蓋箭頭底部的顏色，為箭頭增加透明度。這就是整個箭頭的效果。

現在只需要調整盒子的大小和顏色，以適應您的特定設計需求。您可以將箭頭向上或向下旋轉90度，以創建垂直箭頭。