問題タブ [css-shapes]

私が今していることよりも、円形のdivを作成する簡単な方法があるかどうか疑問に思っています。

現在、サイズごとに画像を作成しているところですが、面倒です。

とにかくCSSを使用して円形のdivを作成し、半径を指定できますか？

この画像のように、数字を円で囲みたいと思います。

これは可能であり、どのように達成されますか？

誰かがこのようなスキューを達成する方法を知っていますか？

CSSの新しい変換プロパティを使用していますか？

あなたが見ることができるように、私は両方の角を歪めようとしているので、これが可能かどうか誰かが知っていますか？

私はあなたの誰かがこのようなものを作ることが可能かどうか知っているかどうか疑問に思いました：

http://www.infimum.dk/HTML/slantinfo.htmlについては知っていますが、傾斜した領域にテキストを入れることができません。

私は最新世代のブラウザのみを見ています：

• IE9（これについてはあまり調べていません）
• FF4
• Chrome10
• Safari5
• iOS 3.4
• オペラ？

正方形や長方形、丸みを帯びた境界線のある円や省略記号（円：W = H、省略記号：W！= H）を簡単に取得できることはわかっています。ボーダー設定でスロープを取得できることはわかっています。1/2と1/4の円を取得する方法を知っていますが、取得することは可能ですか？

• パイウェッジ（任意のサイズ、円内の任意の場所？つまり、18％のウェッジ、水平から20％オフ）
• 台形、八角形、五角形、六角形
• 星（n個の尖った星）
• まだ言及されていないこの中の個々の形状のいずれか

オプションではなく、CSS+DIVオプションを探してい<canvas>ます。ネストされたdivの使用量が最も少ないオプションも探しています。これは、1つの例でいくつかの形状を示す例です...

素敵な CSS トリックに出くわしました。フィドルをチェックしてください...

これにより、小さな矢印/三角形のような効果、「ツールチップの尾」が作成されます。これは私の心を吹き飛ばします！これがどのように機能するのか知りたいです。

さらに、この CSS トリックを拡張して次のような効果を作成する方法はありますか。

これは興味深い問題です。今のところシャドウを無視して、CSS のみを使用してこれを行うことはできますか?

更新 1

最初の質問に対する解決策を見つけました。これがフィドルです...

http://jsfiddle.net/duZAx/7/

HTML

CSS

では、純粋な CSS を使用して上記の小さな画像を正確に模倣し、シャドウを含め、クロスブラウザーと互換性を持たせるにはどうすればよいでしょうか?

更新 2

以下の回答を組み合わせた後の私の解決策は次のとおりです。複数のブラウザーでテストしたことはありませんが、Chrome では見栄えがします。

http://jsfiddle.net/UnsungHero97/MZXCj/688/

HTML

CSS

DIVが画像を三角形にカットし、それによって画像の一部のみを三角形で表示するIMGを含むDIVを作成するにはどうすればよいですか。

それで..

画像は正方形ですが、画像を含むDIVは三角形です。 http://www.script-tutorials.com/creating-kaleidoscope-using-jquery-and-css/は、このソリューションがxブラウザーに対応していない（つまり非）ことを除いて、これを非常にうまく解決します。

http://css3pie.com/は面白そうに見えますが、これはPHPに依存しています。

次の形で 1 つのタグを 形成する必要があります。div

クロスブラウザにすることはできますか？必ずしも丸みを帯びた角が必要なわけではありません。divホバー時に全体の境界線の色を変更できるようにする必要があるため、 2つdivの s を使用しても実現できないと思います。

HTMLとCSSを使用して流動的な円を作成しようとしています。ほぼ完成ですが、流動的で中身がダイナミックであるため、形が円形から楕円形などに変化しています。

手伝ってくれませんか。