-2

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

tacoshy
  • 10,642
  • 5
  • 17
  • 34
Tim Bordasch
  • 29
  • 7
  • What has the question to do with `css-animation` or `javascript`? You might looking for `clip-path`. It would be the easiest solution. PS: To not tag in title, thats what you have the tags for! – tacoshy May 12 '22 at 16:35

1 Answers1

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">
tacoshy
  • 10,642
  • 5
  • 17
  • 34