CSSのbackground-imageを使ってボーダーを作る方法

Question

前提・実現したいこと

このような（画像）点線をCSSで実現したいのですが、
どうやって色を三色に指定するのか教えていただけないでしょうか？

色々調べてみて
現在一色だけのボーダーなら作れました！

該当のソースコード

.item::after {
  background-image: linear-gradient(to right, #E88467, #E88467 27px, transparent 8px, transparent 8px);
  background-size: 35px 8px;
  background-repeat: repeat-x;
  content: '';
  display: inline-block;
  height: 20px;
  width: 100%;
}

Answer 1

下記でどうでしょう。

.item::after {
  background-image:
    linear-gradient(to right,
      #E88467 27px, transparent 27px, transparent 35px,
      #6fb092 35px, #6fb092 62px, transparent 62px, transparent 70px,
      #c7b736 70px, #c7b736 97px, transparent 97px);
  background-size: 105px 8px;
  background-repeat: repeat-x;
  content: '';
  display: inline-block;
  height: 20px;
  width: 100%;
}

Comments

[Tlexxxxxx]

ありがとうございます！できました！