問題タブ [css-shapes]

これは私を狂わせています、私は以前にそれを見ましたが、それを複製することも、それまたはそれのためのリソースを見つけることもできません。私がやっていることは、革の質感と「ステッチパターン」を備えた縦型のリボンです。:afterステッチの仕組みは非常にシンプルで、内側のdivは破線の境界線で、リボンの形状も疑似クラスを使用すると十分に簡単ですが、2つを組み合わせるのは計画的ではありません。

これは私がこれまでに機能しているcssのために持っているものです（それはすべてcssから革の質感を引いたもので行われます）：

さらに、影は「正方形」の形式のままであり、すべての形をとっていません。明確にするために、私は誰にもデバッグなどを求めていません。目的の結果を達成できる代替またはさらなる方法を共有するように求めているだけです。cssはまだ学習中のものなので、アドバイスやあなたが与えることができるその性質はありがたいです、そしてあなたが追加情報を必要とするならば、私に知らせてください。ありがとう！

私はdivで白い形をしようとしています:

http://sircat.net/joomla/sircat/mies/2.png

div の下部の対角線形状を取得するにはどうすればよいですか?

私はdivのためにこれを持っています: width: 620px; 高さ: 440px; 背景色: 白;

ありがとうございました

編集：divの背後にあるbgを忘れてください。最上層にあるため、bgの助けを借りずに、斜めの境界線でdivを作成したいです

http://jsfiddle.net/ghAgQ/をご覧ください 。長方形と同様に、矢印にも同じグラデーションが必要です。それがどのように行われたかについてのアイデアはありますか？ありがとう

</p>

基本的な CSS を使用して、HTML ページで三角形を作成したいと考えています。読み込みに時間がかかる三角形の写真を使用しているため、ページの読み込み時間を短縮したいと考えています。

いくつかのボーダートリックで、台形を作成できることを知っています。また、境界線の色をrgba（r、g、b、a）に設定して、透明にすることもできます。

しかし、透明な境界線と背景を持つ台形を作成することは可能ですか？

例については、以下の画像を参照してください。

現在、この効果を実現するためにいくつかのpng画像を使用していますが、さまざまなサイズの画像を生成するのは本当に退屈な作業なので、cssソリューションを探しています。</ p>

css (画像なし) で、境界線の半径と三角形の側面を持つアイテムを作成することは可能ですか?

この質問のためにjsFiddleを作成しました。

基本的に、私のサイトにはツールチップがあり、リンクの右側に表示されます。しかし、黒いボックスの左側で、リンクを指すボックスに三角形を付けたいのですが、CSS だけを使用してこれを行うことは可能ですか? このように左に

div 内に矢印を作成する必要があります。矢印を作成しましたが、以下に示すように境界線で視覚効果を得る必要があります

試したサンプルのデモhttp://jsfiddle.net/rLZkf/4/

大胆なプロジェクトがあり、アドバイスをお願いします。CSSダイアモンドを使用したサイトが欲しいのですが、画像を添付して、自分が何をしているのかをよりよく理解できるようにしました。これまでに遭遇した問題は次のとおりです。

• サブメニューが追加されるまで三角形は完全に整列され、次に右の3つが右にシフトします（これは1つのポイントで機能していました）。また、サブメニューの下にあるliはそのひし形を失います
• サブメニューのひし形のテキストは中央に配置されていません。
• 背景画像、ひし形、タイトルの順に表示できません。さまざまなz-indexを試しましたが、機能しませんでした。（メニュータイトルを表示するには、背景画像を削除し、ダイヤモンドを-1 zインデックスする必要があります）
• サイドバーの三角形のテキストラッピングを作成するためにスパンを使用する必要があるため、サイドバーを単にひし形にすることはできません。そのため、その下にひし形を追加する必要があります。
• 右側のテキスト本文とサイドバーのテキスト本文の両方をひし形で折り返すのは素晴らしいことですが、これは不可能だと思うので、サイドバーを折り返すだけに戻しました。

これまでの私のHTMLは次のとおりです。サブメニューとサイドバーのひし形の試みをコメントアウトしました。http://jsfiddle.net/s4XXE/

CSSだけを使用して、一方の端に角度を付けて透明な背景を作成できるようにしたいと思います。私はそれをしようとするさまざまな方法を見つけましたが、それを完全に得ることはできません。私は実際にはスクリプトを使用したくありません。CSSだけを使用します。

背景画像は次のようになります。