'Cut Shape into an Image / other Elements [duplicate]

enter image description here

Ive got a Grid with 6 planets. To let them appear a little bit more interesting, I wanted to cut out a tri-angle shape in the middle of each image. Something like that:

enter image description here

Is there a way to (easily) do it?. Maybe even being able to animate that tri-angle a little bit on :hover

htmlcss


Solution 1:[1]

Just use clip-path to clip away that tri-angle from the picture. You can use css-animation to clip aswell:

img {
  clip-path: polygon(0 0, 20% 0, 50% 40%, 80% 0, 100% 0, 100% 100%, 0 100%);
}
<img src="https://via.placeholder.com/200.jpg/FF0000">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 tacoshy

Related Questions