如何用CSS繪制一條折線

在CSS中，我們可以使用邊框?qū)傩詠砝L制一條折線，以下是一個(gè)簡(jiǎn)單的例子：

HTML代碼：

<div class="dashed-line"></div>

CSS代碼：

.dashed-line {
  width: 100px;
  height: 100px;
  border: 2px dashed #000;
  position: relative;
}

在這個(gè)例子中，我們創(chuàng)建了一個(gè)帶有邊框的div元素，邊框樣式為虛線，顏色為黑色，我們將該元素定位在相對(duì)于其正常位置的地方，以便我們可以在其下方繪制另一條折線。

我們可以使用偽元素來繪制第二條折線：

CSS代碼：

.dashed-line::after {
  content: "";
  position: absolute;
  top: 100px;
  left: 0;
  width: 100px;
  height: 100px;
  border: 2px dashed #000;
}

在這個(gè)例子中，我們使用偽元素::after來繪制第二條折線，我們將該元素的top屬性設(shè)置為100px，使其位于***條折線的下方，我們?cè)俅问褂眠吙驅(qū)傩詠砝L制折線，顏色同樣為黑色。

我們已經(jīng)成功使用CSS繪制了兩條折線，您可以根據(jù)需要調(diào)整元素的寬度、高度和邊框樣式來繪制不同的折線效果。