jquery - CSSまたはjqueryで三角形の形をした画像にクリッピングマスクを作成するにはどうすればよいですか?

Question

クリッピング マスクは下向きの三角形の形である必要があり、右側の部分だけが表示されます。三角形のマスクの左側の部分は重要ではありません。これをどのように作成できますか?

Answer 1

Webkit の場合、CSS を介してクリッピング マスクを使用できます。ただし、これはFirefox、IE、Opera では機能しません。

最新のブラウザーでは、クリッピング パスを含む SVG を使用できます。SVG で画像をクリッピングする例を次に示します。