CSS通過兩點(diǎn)坐標(biāo)連線

有時(shí)候在頁面上需要通過兩點(diǎn)之間的一條線來進(jìn)行視覺效果的補(bǔ)充，這時(shí)候我們可以使用CSS通過兩點(diǎn)坐標(biāo)連線的方法來實(shí)現(xiàn)。下面我們來看一下示例代碼：

.line {
position: absolute;
border-bottom: 2px solid #ccc;
transform-origin: 0% 0%;
}
.line.horizontal {
transform: rotate(0deg);
}
.line.vertical {
transform: rotate(90deg);
}

首先我們需要創(chuàng)建一個(gè)線條的類名，這里我們使用“l(fā)ine”作為類名。然后給這個(gè)類名使用絕對定位，再添加邊框樣式來實(shí)現(xiàn)線條的顯示。在旋轉(zhuǎn)線條方向的時(shí)候，我們可以通過添加“transform-origin”樣式屬性來實(shí)現(xiàn)，值為變換點(diǎn)的橫縱坐標(biāo)，可以是百分比或像素值。最后，我們需要創(chuàng)建橫線和豎線的兩個(gè)類名來實(shí)現(xiàn)不同方向的線條，分別使用“transform: rotate(0deg);”和“transform: rotate(90deg);”來實(shí)現(xiàn)旋轉(zhuǎn)。