SVGを使用すると、透明な斜めカットが作成されます

私は現在以下の画像でクリップパスを使用しています。私は愚かにブラウザのサポートを見ていないし、それがエッジやIE 11で動作しないことがわかった。SVGを使用すると、透明な斜めカットが作成されます

私はどのように、または可能な限り私はSVGだけで、 IE 11およびEdge。

私は現在、以下のコードで遊んでてきたが、strugglignが、私は上記の画像のようにその上に画像を置くことができる方法を理解します。

<svg> 
     <path d="M0,60 L50,0 L420,0 A56,56 0 20,1 470,60z" fill="red" /> 
     <a xlink:href="#"> 
     <text x="410" y="37" font-size="18" font-weight="500" fill="yellow">Test</text> 
     </a> 
    </svg>

本当にあなたのアイデアを楽しみにしています。ここで

出典

2017-08-21 MaxwellLynn

私は実際のマスキングを削除し、長方形とSVGを使用して視覚的結果全体を「背景画像」として偽装します。ヒーローイメージをフルレイヤーにして、傾斜したメニューでそれを覆うことはかなり妥当です。 – mystrdat

あなたは何を意味するのか分かりません。あなたは簡単な例を表示できますか？ – MaxwellLynn

私は@mystrdatがなぜ写真をマスクする必要があるのかと尋ねています。なぜあなたはそれの上に黒い部分を配置できませんか？ –

は多少あなたが探している結果を達成するためにCSS3変換および移行の特性とともに擬似要素::before & ::afterを使用して（ラフコードのため申し訳ありません、それは急いで作ったとして）大まかなアイデアです。あなたがそれを調べて、役立つならばそれを回避することができます。私はFFとIEのエッジと11と10でそれをチェックし、全体的にうまく動作します。

https://codepen.io/Nasir_T/pen/EvEMMG

は、この情報がお役に立てば幸いあなたのアイデアや問題を回避を提供します。

出典

2017-08-21 15:31:33

それはやります。ありがとう！または女性！ – MaxwellLynn

SVGを使用すると、透明な斜めカットが作成されます

答えて

関連する問題