HTML

spanタグを3つ用意します。

    <div class="box">
        <span> </span>
        <span> </span>
        <span> </span>
    </div>

CSS

cssは以下の通りです。

.box {
  position: relative;
  width: 50px;
  height: 34px;
}

.box span {
  position: absolute;
  width: 100%;
  height: 4px;
  background-color: black;
}

.box span:nth-child(1) {
  top: 0;
}

.box span:nth-child(2) {
  top: 15px;
}

.box span:nth-child(3) {
  bottom: 0;
}

説明

nth-child

擬似クラスである nth-child を使用します。
nth-child は何番目の要素かを指定できます。
今回は1番目〜3番目のspanタグへ線の位置を指定しています。

boxクラスのheight

height が 34px になっています。
spanタグの height が 4px なので、boxクラスの height を 30px + 4px で 34px にしました。

結果

以下のような3本線が引けました。

最後に

特にありません。