私は、主に grid を使用して、提供された画像と同様のタイムラインを作成しました。

私が作成した例には、3 つの カスタム ユーティリティ 一个>:

メイン.css：

1. borderGray クラスは要素の上部と下部に灰色の境界線を作成し、テキストを中央に配置します。
2. textClass は font-size の応答性を担当します。このクラスは完全に変更することができます。ここはとても便利そうです。
3. slantedLine クラスは、左下隅から右上隅まで要素を通る対角線を作成します。これは私が以前得ていた答えです: div背景CSSで斜めの線を描くCSS

次に、HTML に移動します。

レスポンシブ デザインで複数のバリエーションを使用したい場合に備えて、画面サイズに基づいて変更できる 3 つの異なるバリエーションを作成しました。 これらのバリエーションは次のとおりです。

ボンネットの下は次のようになります。

HTML：

追い風プレイ

イラスト:

これらのバリアントには 3 つの違いがあります:

各テキストコンテナの
1. col-span-{n}。 ＃＃＃書類＃＃＃＃＃＃ grid-cols-{n}
および
2. grid-rows-{n}。 ドキュメント-1 ドキュメント-2 grid
内の各要素の
3. col-start-{n} および row-start-{n}。 ドキュメント-1 ドキュメント-2 奇数番号の各要素は単なるテキスト領域です。これらの div に段落を挿入して、必要なテキスト/リンクを表示します。

   偶数番号の各要素は、対角線タイプ (slantedLine

   ) の領域です。対角線は左下隅から右上隅まで伸びています。このような線を持つ 2 つの要素を組み合わせると、上下の斜めの境界線の効果が得られます。

   ＃＃＃一緒に：

   ---

   あなたが探している正確なデザインは得られないかもしれませんが、ここからどのように前進するかについてのアイデアを得ることができます。

   ご質問がございましたら、お知らせください。 お役に立てれば幸いです。