レンダリングは次のとおりです
HTML 部分には ul リストのみが必要です (進行状況バーの最初と最後は必要に応じて変更できます)
CSSスタイルのパーツコード
ステップ 1: 長方形の効果を生成する
ステップ 2: 以下に従って、長方形の後ろに三角形を生成します。
ステップ 3: 背後の三角形の色を変更する
ステップ 4: 長方形の前に三角形を生成し、位置カラー処理を実行します。
この時点で、レンダリングは基本的に完了しています。
その後、ステータスに基づいて現在の色の変更を判断する必要があります (下図の最後の 3 つのスタイルはアクティブなスタイルを追加し、最初のスタイルは最初の要素の前の三角形を非表示にし、最後の要素も必要に応じて変更できます。処理)
最終レンダリング
