html - div から形状 (三角形) を切り取り、背後に背景を表示する

Question

div から三角形を切り取り、div の背後にある背景を表示しようとしています...これが可能だとは思わなかったでしょうが、あなたの SO プロはここで私を驚かせ続けているので、それは価値があると思いましたショット:-)

これが私が達成したいことです（かすかな画像で申し訳ありません）：

_{この質問に 3 列のソリューションなどで答えないでください。私はその方法でこれを達成することができます...いくつかの方法でこれを達成できるクールな CSS トリックがあるかどうかを知りたいだけです。可能であれば、グラフィックはありませんか？}

Answer 1

ここに当てはまると私が考えることができる唯一のものは、image maskです。マスクの上にコンテンツを配置するには、おそらく要素を別の要素の上に配置する必要があります。

イメージマスクのサポートはどこにでもあるわけではありません (現時点では webkit のみだと思います) が、おそらく時間の経過とともに変化するでしょう。