問題タブ [css-shapes]

歪ませることができることはわかっていますが、各コーナーを特定の角度で歪ませる方法がわかりません。

私が取り組んでいるプロジェクトは次のとおりです: http://map.ucf.edu/

特にメニュー内のタブを見てください。現在、画像を使用していますが、対応するブラウザ用に変更したいと思います。

CSS の trapazoidを作成できることはわかっていますが、それはコンテンツのない境界線を使用しています。最終結果には、少し丸みを帯びたコーナーも必要です。

編集：Zoltan Tothのソリューションから始めて、これを達成できました：デモ

不透明度が0.6の2つのdivがあります。それらをオーバーラップさせる必要がありますが、不透明度を保持し、新しい結合された不透明度レベルを作成しないでください。画像が使えません。

編集-小さな円にはキャンバス要素が含まれているはずです。疑似要素が最善の解決策であるかどうかはわかりません。

とにかくCSSでこれを行うことはできますか、それともキャンバスを使用する必要がありますか？

例 -

http://dabblet.com/gist/1566209

HTML：

CSS：

テキストの下に、ユーザーがさまざまなタブにカーソルを合わせたときに指す小さな三角形を配置したいと思います。これが私が使っているコードです。

cssナビゲーションバー

CSS を使用して左側に三角形を描画する DIV を作成します。親要素と疑似要素 (画像を参照) およびコードの両方に均一なボックス シャドウを適用しようとしています。

これは可能ですか？それとも、これに border-image を使用した方がよいでしょうか?

(上: シャドウ前、中: CSS ボックス シャドウ、下: 望ましい結果)

私はこのようにする必要があります。純粋なCSSで可能ですか？

ここの画像のようなナビゲーションメニューをデザインしました：

画像を使用せずに、css3の丸い角とボックスシャドウを使用してコーディングしたいと思います。問題は、最初のメニュー項目の左側にある丸い角と、メニューの右側にある角です...私はそれを「逆」の丸い角と呼んでいます...

で色を変更する必要があります:hover。

これをcssだけで行う方法はありますか？そしてどうやって？

現在、サイト用にかなり興味深い形状のナビゲーションを作成しています。各メニュー項目が必要とする形状を以下に示します。

最終的なナビゲーションは、これの拡張バージョンのようになります。

これらの形状を CSS で作成するのは興味深い実験になると思いました。矢印の形状の 1 つの CSS と HTML は次のとおりです。

各 nav アイテムには負のオフセットが適用されています (デモでは省略しました)。これは、それらがすべて互いに同一平面になるようにレンダリングされるためです。

ロールオーバーとオン状態を Javascript で処理しています。

私の問題は、ナビゲーションをページの幅全体に広げることです。現時点では、すべてを収容するために、ナビゲーション コンテナーをより大きな幅に設定する必要があります。

オーバーフローを非表示に設定しようとしましたが、最後のアイテムは続行して終了するのではなく、レベルを下げています。

ここに例を設定しました - http://jsfiddle.net/spacebeers/S7hzu/1/

赤い境界線はoverflow: hidden;あり、青い境界線はありません。]

私の質問は次のとおりです。レベルを下げることなく、含まれている div の幅を埋める行にボックスをすべてフロートさせるにはどうすればよいですか。

ありがとう

私がこれまでに作ったものはここにありますhttp://jsfiddle.net/cmRHp/1/

そして、私はまさにこのようにしたい

非常に単純なアイデアですが、これを行う方法がわかりません。div（可能であれば）1つとしてスタイリングできるようにしたいと思います。

どうすれば八角形を作成できますdivか？

このような

このコードだけで