css - 複数の境界線と境界線を持つ CSS グラデーション

Question

下の画像に相当するcssを作成しようとしています。複数のストップを使用していますが、ハード ストップsolid 2px whiteの境界を取得するのに苦労しています。追加すると、ハードエッジではなくグラデーションのように見えます。どんな助けでも素晴らしいでしょう、ありがとう!

.stripes {
  max-width: 800px;
  height: 100px;
  background-image: linear-gradient(to right, #3f2919 0%, #3f2919 6%, #ffffff 6%, #ffffff 7%, #68adc6 7%, #68adc6 20%, #875e3b 20%, #875e3b 40%, #86979b 40%, #86979b 45%, #83a450 45%, #83a450 70%, #75753a 70%);
}

<div class="stripes"></div>