連線是網頁中常見的元素，可以用來繪制關系圖、流程圖等。下面我們來介紹如何使用純 CSS 實現畫連線功能。

.line {
position: absolute;
border-bottom: 2px solid #ccc;
transform: skew(-20deg);
}

我們首先創建一個帶有傾斜變形的水平線段，這個線段可以被旋轉和復制來形成連線。

.line-vertical {
width: 2px;
height: calc(100% - 20px);
transform: skew(-20deg) rotate(-90deg);
}
.line-horizontal {
width: 100px;
}

接下來我們需要創建兩個垂直和水平方向的線段，并進行相應的旋轉和傾斜變形。我們可以使用 CSS 的 calc 函數來動態計算垂直方向的高度。

.box-one {
position: relative;
left: 50px;
top: 50px;
}
.box-two {
position: relative;
left: 200px;
top: 100px;
}

我們需要將連線放置在兩個 HTML 元素之間，因此我們需要確定它們的位置。在這個例子中我們用了兩個矩形盒子作為演示元素，它們在頁面上的位置分別是 box-one 和 box-two。

.line-one {
position: absolute;
left: 0;
top: 50%;
width: 50px;
height: 2px;
transform: skew(-20deg) rotate(-45deg) translate(-50%);
}
.line-two {
position: absolute;
left: 50%;
top: 50%;
width: 150px;
height: 2px;
transform: skew(-20deg) rotate(45deg) translate(-50%);
}
.line-three {
position: absolute;
left: 100%;
top: 50%;
width: 50px;
height: 2px;
transform: skew(-20deg) rotate(135deg) translate(-50%);
}

最后，我們用上面的代碼創建了從左到右的三段連線。其中，第一段和第三段的垂直方向位置是一樣的，因為它們與中間的第二段連線交匯。我們通過使用 transform 和偽元素的技巧來實現傾斜效果并旋轉這些線段。