CSSを使用した垂直のマルチカラーボーダーの作成方法

1. クラスを使用した方法:

HTML:

<div class="border-container">
  <div class="border"></div>
</div>

CSS:

.border-container {
  position: relative;
  width: 200px; /* ボーダーを含む要素の幅 */
  height: 300px; /* ボーダーを含む要素の高さ */
}
.border {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 10px; /* ボーダーの幅 */
  background-color: red; /* ボーダーの色 */
}
.border:before {
  content: "";
  position: absolute;
  top: 10px; /* ボーダーの上側の余白 */
  left: 0;
  right: 0;
  height: 10px; /* ボーダーの高さ */
  background-color: green; /* ボーダーの色 */
}
.border:after {
  content: "";
  position: absolute;
  bottom: 10px; /* ボーダーの下側の余白 */
  left: 0;
  right: 0;
  height: 10px; /* ボーダーの高さ */
  background-color: blue; /* ボーダーの色 */
}

2. 擬似要素を使用した方法:

HTML:

<div class="border"></div>

CSS:

.border {
  position: relative;
  width: 200px; /* ボーダーを含む要素の幅 */
  height: 300px; /* ボーダーを含む要素の高さ */
}
.border:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 10px; /* ボーダーの幅 */
  background-color: red; /* ボーダーの色 */
}
.border:before {
  content: "";
  position: absolute;
  top: 10px; /* ボーダーの上側の余白 */
  left: 0;
  right: 0;
  height: 10px; /* ボーダーの高さ */
  background-color: green; /* ボーダーの色 */
}
.border:before {
  content: "";
  position: absolute;
  bottom: 10px; /* ボーダーの下側の余白 */
  left: 0;
  right: 0;
  height: 10px; /* ボーダーの高さ */
  background-color: blue; /* ボーダーの色 */
}

これらの方法を使用すると、要素に垂直のマルチカラーボーダーを作成することができます。必要に応じて幅や色を調整してください。