問題タブ [css-shapes]

こんにちは友達私は何度も試しましたが、私を助けてくださいよりも成功していません

こんな感じで下の画像にしたい

今、私はこれを作成しましたが、このdivの右隅は作成していません。

私のコードは

Css

HTML

Jsfiddleリンクはこちらhttp://jsfiddle.net/TBB9S/

この形をCSS3で作ることはできますか? どのように？私は立ち往生しています：http://dabblet.com/gist/2962169

http://nicolasgallagher.com/pure-css-gui-icons/demo/のように、純粋なCSSで作成できる形状はたくさんあり、常に1つの要素を記述します（ここ<li>）。

ただし、 http：//www.gentegeek.com/proyectos/html-css-space-invaders/のように、もう少し複雑な形状が必要な場合は、多くを配置する必要があります<div>（ソースコードを参照）。

1つの要素だけで形状を作成できますか？はいの場合、どのように？

cssだけでこの形を作りたいです。私はこれができるとかなり確信しています。しかし、グラデーションが関係しているのに問題があります。

この図形には、内部にテキストが含まれます。推奨されるhtmlマークアップは次のとおりです。

jsFiddleをいただければ幸いです。
前もって感謝します。

さて、ページの下部に表示されている効果を、トップに戻るボタンを使用して複製しようとしています。http ://www.ppp-templates.de/tilability/- 「Westay」のコンテンツ領域の後接続されています。

基本的に彼はそのために背景画像を使用しています。CSSでそれを複製して同じ効果を維持したいと思います。

CSSで境界線のある三角形を作成する方法は知っていますが、私の場合は、色ではなく透明なbg画像を使用したいので、境界線は使用できません。

背景画像を削除し、div全体で#FFFを使用したため、すべて白になりました...新しいdivを作成し、[トップに戻る]ボタンを追加し、背景を追加しました。透明になるため、透明になりますが、どうすればよいですか。 CSSで三角形を作成しますか？

どんな助けでも大歓迎です。

やあみんなはあなたが私を助けることができることを望んでいた。

1時間以上この場所にいて、それが私を夢中にさせました。

基本的に私はCSSに関しては初心者ですが、学んでいます。現時点では、次のようなメニューを複製しようとしています。

私がこれまでに持っているものは次のようになります（フォントが異なることは知っていますが、問題はありません）：

ご覧のとおり、iveは背景を取得しましたが、各タブ間の開始、終了、および区切り（黒い線の部分）をどのように作成するかがわかりません。

また、基本的には開始、中断、終了は.jpg画像として持っています。これを行うためのhtml5またはcss3曲線などを探していません。シンプルにしたいだけです:)。

これは私がこれまでに得たものです。残されたものを作成する方法についていくつかのヒントを教えていただければ幸いです。また、あまり優れていないアプローチを使用した場合は、より良いアプローチを提案してください。

html：

css：

CSSで円形の扇形を作りたいです。セクターは完全な円を形成します。CSSでどうやって作るの？

サンプルを見つけたのですが、4分の1の扇形になります。完全な円を作る6つの扇形を作りたいです。どうすれば作れますか？

注：私は絵が苦手ですが、ここに私が欲しいもののサンプルがあります...

添付のように、ウェブサイトで奇妙な形のメニューを作成するには、どのようなアプローチを使用しますか? 円の各部分は個別のリンクである必要があります。マウスのホバリングは、特に中央付近でかなり正確になるはずです。(絶対的な 20 ピクセルの中央は、100% 正確であることが不可能である場合、まったくリンクではない可能性があります)

http://www.vanityclaire.com/形状は重なっています が、メニューは長方形でできており、少し不正行為が行われています。ただし、私の場合、オーバーラップの量が多すぎて、そのような手法を使用できません。フラッシュを使用する以外に、ブラウザ/デバイスと互換性のある方法でそれを行う機会はありますか?

私は自分のウェブページでこの効果を達成しようとしています..

赤いボックスはメニューを配置する場所です。赤いボックスの下部を斜めにしたいと思います。傾斜の右側のセクションは、背景に灰色の画像がある可能性があるため、透明にする必要があります。

私が思い付くことができる唯一のことは、要素を回転させることですが、それは私が望まない要素の内容も回転させます..赤い要素の一番下のbg(単色になります)のみを傾ける必要があります.

目標はこれを達成することです：

画像を切り抜く方法はすでに知っていますが、それは本当に簡単な部分です。丸みを帯びたブロックで画像をオーバーラップし、左のパディングと負の左マージンを追加し、オーバーフローを非表示にして出来上がりにすることに関して、上部（短いコメント）の実装について大まかなアイデアがあります。ただし、コンテンツが拡張された場合は機能します。これらはコメントブロックであるため、拡張されます。

1）破線のボックスは、コンテンツが表示される領域を表します。下の画像（長いコメント）は、floatがどのように機能するかと同様に、画像の下の余分なスペースを埋めるコンテンツを示しています。ただし、これを実装するのが難しすぎる場合は、コンテンツにまっすぐな長方形を受け入れ、画像の下のスペースを空にすることができます。

2）ボックスは、幅と高さの両方で150px/90pxの最小幅/最小高さに拡張可能です。

3）境界半径のため、IEで90度の角度として表示されるかどうかは気にしません。これが、IEがborder-radius（9を除く）を使用してサイトの残りの部分を表示する方法です。

4）jQueryも受け入れることができます。現在、私は1.7.2を使用していますが、私のサイトはかなり軽いので、スクリプトを追加してもかまいません。