1

CSSを使用して次の画像を作成する必要があります。

ここに画像の説明を入力してください

これは、メインナビゲーションを含む1つの画像です。だから私はそうするためにいくつかのCSSを書きました(正しいカラーコードではありません、私は知っています):

#menu-block {
  background: #730868;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#730868), to(#0a9f9d));
  background: -webkit-linear-gradient(top, #730868 0%, #0e70a2 76%,#0a9f9d 100%);
  background: -moz-linear-gradient(top, #730868 0%, #0e70a2 76%,#0a9f9d 100%);
  background: -ms-linear-gradient(top, #730868 0%, #0e70a2 76%,#0a9f9d 100%);
  background: -o-linear-gradient(top, #730868 0%, #0e70a2 76%,#0a9f9d 100%);
  background: linear-gradient(top, #730868 0%, #0e70a2 76%,#0a9f9d 100%);
  -pie-background: linear-gradient(top, #730868 0%, #0e70a2 76%,#0a9f9d 100%);
  behavior: url(/pie/PIE.htc);
}

そして、このコードはうまく機能します!最後の矢印を除いて、それはそれがしなければならないことをします...私は正直にこの問題をどのように解決するかについての見当がつかない。
矢印の形をした2番目のdivを作成し、最も近い色を推測する必要がありますか?

IE8をサポートする必要があります...

4

2 に答える 2

0

完全な長方形を作成してから、下向きの矢印のように見えるように背景とブレンドする三角形の画像を下部に配置してオーバーレイしませんか?

于 2013-01-24T16:13:55.943 に答える