デザインで作成されているようなものをcssで再現したい

実現したいこと

こちらの画像のような配置でhtmlとcssを使用して再現できれますと幸いです。

発生している問題・分からないこと

矢印を斜めにしている箇所や互い違いにするようなものをどのように作成すればいいのかわからずにいます。

該当のソースコード

特になし

試したこと・調べたこと

上記の詳細・結果

作成がどのようにしたらいいのかわからず教えていただけますと幸いです。
よろしくお願いいたします。

補足

特になし