問題タブ [clip-path]

特定のポリゴン境界内で画像 (以下を参照) を変換する方法を見つけようとしています。画像がこの境界線を超えている場合は、画像のこの部分をカットしたいと思います。クリップ（時代遅れでポリゴン形状がない）とクリップパス（画像内の境界線を移動するのではなく、画像自体をカットする）コマンドを使用しようとしましたが、今まで有用な結果はありませんでした。

今のところ、すべての内容を含む私のボックスのコード スニペット:

次のように、css で webkit-transform コマンドを使用して画像を変換します。

そして、私のアニメーションは次のように与えられます:

このキーフレームはすべて、さまざまなブラウザー タイプ用に変更されており、問題なく動作します。ここで、例 (a) のHEREでわかるように、このアニメーション画像を特定のポリゴン境界内で変換したいと考えています。例 (b) では、現在の結果が表示されていますが、これは機能していません。

親がマスクされていても(クリップパス)、要素を回転(rotateXまたはrotateY)することは可能ですか? このような：

html

CSS

私は私の問題で例を作りました。

https://jsfiddle.net/29xecv6c/1/

ありがとうございました

私が作成したこの形状の左端の 3 つの角を丸くしたいのですが、どのようにすればよいでしょうか?

http://www.smashingmagazine.com/2015/05/creating-responsive-shapes-with-clip-path/から CSS Clip Path を試していますが、この非常識なバグがあります。一言で言えば、コードは CodePen と JSFiddle の両方で機能しますが、私のローカル/アプリでは機能しません。

これが、私が考え出そうとしていたポリゴンのコードです。まず CSS:

関連する HTML は次のとおりです。

index.html (上記の HTML) を開くと、予想していた多角形ではなく四角形が表示されます。それでも、記事に記載されているとおり、正確な指示に従いました。

次に、コードを CodePen ( http://codepen.io/anon/pen/JdwrQw ) と JSFiddle ( http://jsfiddle.net/yk95wxmL/ ) に同じブラウザーでコピーすると、動作します。

私は一生これを理解することはできません。Firefox は CodePen と JSFiddle の同じコードの css クリップ パスを理解して実行しますが、HTML では実行しませんか? 確かに、HTML 全体を Codepen にコピーしたところ、css クリップ パスが機能しました。これは私を完全に超えています。誰かがおそらく明白な提案を思い付くことができれば、私はどういうわけかそれを見逃しました.私は非常に感謝しています.

パスから派生した複雑なクリップパスを使用して、svg 図面で円を切り取ろうとしています。シェイプを使用すると機能しますが、パスは使用しません。

別の座標空間に従ってパスが事前に設計されているためでしょうか。

関連するコードは次のとおりです。

画像の透明部分をクリック可能にしたくありません。
見つけまし<map>たが、座標はピクセル単位であり、応答性の高いことをしたいと考えています。別の問題: 最初の画像の下部と 2 番目の画像の上部の間にピクセルがある理由がわかりません。

https://jsfiddle.net/tsfxy84u/

どうもありがとうございました。

私のウェブサイトにあるいくつかの画像の上に多角形を形成しようとしています。私の問題は、ポリゴンが常に同じ幅であるとは限らず、画像の幅に基づいていることです。私の問題を確認できる codepen を作成しました: http://codepen.io/doronsever/pen/bdyqYq。
これが私のsvgクリップパスを生成するコードです

ご覧のとおり、左上の小さな三角形は両方の画像で同じサイズではありません。画像の幅に関係なく、常に同じサイズになるように制御するにはどうすればよいですか? FF サポートが必要なため、CSS クリップ パスを使用できません... 10x

これは基本的に私が達成したいことです --> https://jsfiddle.net/tak1pyt7/1/

私には解決策がありますが、フィドルのコードには次のようなさまざまな問題があります。

• クリップ パスがサポートされていないため、IE または Edge では機能しません。
• クリップ パスは、Firefox の CSS シェイプをサポートしていません。Firefox で機能させる必要がある場合は、インライン svg を指定する必要があります。
• インライン svg も提供しようとしましたが、私の要件を解決しない独自の問題があります。コンテナの高さと幅に関係なく、カット寸法を同じにする必要があります。現在、画像をカットするインライン svg を使用すると、高さと幅の変化に応じて寸法が変化します。つまり、カットはレスポンシブです。カットの静的寸法が必要です。

上記のソリューション以外に、コーナーをカットしたdivを作成するのに役立つソリューションをたくさん検索しましたが、後ろにしっかりした背景がないため、カット自体が透明です。

調査したその他のソリューション

CSS3 グラデーション サンプルの使用

• サンプル --> http://jsfiddle.net/spdawson/3Tc8S/light/
• 投稿の冒頭で提供したフィドルなど、領域の高さと幅全体を占めるコンテンツがある場合は機能しません。

CSS ボーダーの使用

• サンプル --> http://jsfiddle.net/spdawson/HhZQe/light/

• カットを作成する必要があるコンテナには、私のデザインには当てはまらない無地の背景色が含まれている必要があるため、うまくいきません。

jQuery プラグインの使用 ( http://jquery.malsup.com/corner/ )

• サンプルコード --> http://jsfiddle.net/spdawson/nxnCD/light/

• 私の要件を考慮すると、そうではない無地の背景色が必要です。代わりに背景として画像があります。

機能するが非常にハッキーなソリューション

• サンプル --> http://jsfiddle.net/26v7pfLb/

• 現在、高さと幅が固定されているコンテナにこのソリューションを使用していますが、コンテナの幅が静的で高さが動的であるページがアプリにあります。その場合、ハッキングを実装するのはかなり難しく、このソリューションを個人的に使用するのは非常に奇妙に思えます。

• CSSでこの種のソリューションを実装するために、よりエレガントでクリーンなものを見つけようとしています

どんなポインタも役に立ちます。

-webkit-clip-path: polygon(0px 150px,200px 150px,100px 0px); を使用して、後方およびオーバーレイされた img (position: absolute; top:0px; left: 10px;) にリンクを含む img があります。

ただし: 可視領域の img.clip-path の下のリンクが機能しません。

この問題をどのように解決しましたか? SVG で別のレイアウトを作成できますか?

PS: リンクの z-index と position:relative が機能しません。SVG+clipPath が機能しません。

デモ: http://jsfiddle.net/9fjv4wbr/