html - タブ付きのcss3マルチステップフォーム

Question

タブを使用してこの複数ステップのフォームを作成しようとすると、多くの問題が発生します。ここにデザインがあるので、私がやろうとしていることを理解することができます:

画像

本当に苦労しているのは、各タブの最後にある矢印のようなものです。css ボーダーを使用して三角形を描画しようとしましたが、デザインに似たものにする方法が見つかりません。これを行うために本当に背景画像を使用する必要がありますか? どんな助けでも本当に感謝します。

<ul>
<li>
<span>text</span>
<span>number</span>
</li>
<li>
<span>text</span>
<span>number</span>
</li>
<li>
<span>text</span>
<span>number</span>
</li>
</ul>

Answer 1

2 つのネストされた div で、話している境界テクニックを使用するだけです。外側の div は三角形の境界線の色 (青) になり、内側の div は灰色になります。灰色のものを少し小さくして適切に配置するだけで、設定は完了です.

これは、ツイートの返信の上に矢印があったときに、Twitter がデザインの以前の反復で行った方法です。