問題タブ [clip-path]

ナビゲーションで CSS スタイルのクリップパスを使用して、コーナーの背景の形状を変更しています。コンテンツ領域にドロップダウンを追加するまで、これは期待どおりに機能します。

ドロップダウンが非表示のときは形状が正しく表示され、ドロップダウンが表示されているときは形状が変化します。私の調査によると、これは要素の幅と高さを使用して要素のクリッピングを決定するクリップパスが原因であり、ドロップダウンが表示されると要素の高さが変化します。

この動作を変更する方法はありますか? 私の目標は、ドロップダウンが表示されているかどうかに関係なく、同じクリッピングを維持することです。

CSS

HTML

JSFiddle

https://jsfiddle.net/7hg1efdj/1/

すべてのシナリオ、つまりさまざまなデバイス、またはマウスを使用してブラウザーのサイズを変更する場合に、margin:top の応答性を維持できる可能性があるかどうかを知りたいです。

HTML:

CSS:

これが私のjsFiddleです。ここで欲しいのは、以下の画像で言及されていることです。

これらは、css クリップパス ポリゴンを使用して開発しようとしている 2 つの形状です。しかし、緑色で塗りつぶされたdivにマージントップを与え、ブラウザウィンドウのサイズを変更すると、その位置が含まれません。

私が見つけた1つの解決策は、メディアクエリを使用し、メディアクエリに基づいてマージントップを変更することです. ただし、ブラウザのサイズを変更すると機能しません。

ブートストラップを使用してマージントップをレスポンシブにできる場合、これについて何か考えはありますか?

そのため、この特定のクリップ パスを Firefox で正しく表示するのに問題があり、正しく動作させる方法が特にわかりません。これまでのところ、WebKit ブラウザーで正しく表示されます。

それは本当に単純なものだと確信していますが、これをFirefoxで正しく表示するには、ここで何が欠けているのかを一生理解できません。

アプリケーションを開発していますが、jQuery ドラッグ アンド ドロップを実装するときに問題に直面しています。Codeをご覧ください。

私が開発しているのは、css Clip Path を使用したポリゴン形状です。Swipe Me Circle をドラッグして Red にドロップすると、「Dropped on Red」のアラートが返されますが、「Dropped on Blue」のアラートも返されますが、Circle は Red にドロップされます。

私はあなたの助けに感謝します.

私のjQueryコードは次のとおりです。

私は現在、divの下部に を配置しようとしているプロジェクトに取り組んでいdivます。div私はそれで大丈夫でしたが、側面を斜めにしたかったのです。私も無事にできました。必要なもの（下部にあり、側面が曲がっているもの）を追加し始めましたが、divすでに追加していましdivたが、別のものを追加すると（2つに大きな違いはありません）、clip-path機能しなくなりました！HTML と CSS を使用しています (ブートストラップなし)。

これが私のコードです( https://jsfiddle.net/MalMan35/uu7weo6o/4/ ):

画像でこのクリップパスを使用したい。

しかし、私の svg パスは、絶対に配置された div.img-container に対して相対的に配置されません。

どうすればそれを達成できますか？

画像を切り取りたい。これにはclip-pathを使用しました。Safari と Chrome ではうまくいきましたが、Firefox ではうまくいきませんでした。このウェブサイトですべての質問を検索しましたが、これが私のコードの最後の形です。しかし、それでも Firefox で動作させることはできませんでした。

これは私のイメージです：

そして、これは私のCSSです：

そして最後にこれを私のインデックスファイルに追加しました：

それでも、Safari と Chrome では機能しますが、Firefox では機能しません。

このような角度のある形状の div を最適にマスクする方法を見つけようとしています。この場合の上部の div が背景画像になり、両方の div が 100% 幅になる場合:

円の形で画像をマスクする方法については多くのチュートリアルを見てきましたが、赤い領域のような div の境界をマスクする方法についてはありません。ビットマップでこれを行うよりも良い方法があるに違いないことはわかっていますが、途方に暮れています。

これを clip-path または SVG で行うのが最善でしょうか? 古いブラウザーについては、それほど心配していません。その結果、赤/青の div が平らな線で区切られていることがわかります。赤い領域全体が背景画像になるため、古い（古い）ブラウザがその角張った境界線を見逃すと、それで問題ありません。

CSS を使用して背景画像を右からオフセットするのと同じようにshape、コンテナの右端を基準にして絶対値を配置したいと考えています。

これにより、右側の要素から 1em の長さの三角形が切り取られるはずです。

% は使用できません。三角形のサイズが要素の長さに依存するためです。これは望ましくありません。

残念ながら、この方法では機能しません。別の解決策はありますか？