How to add a sharp corner to an image

Question

I'm trying to make a sharp corner to an image in CSS. Any ideas on how should I do it?

Example:

I tried to make it with the border-radius property but it did not work for me.

img {
  background: yellow;
  width: 200px;
  height: 200px;
  border-radius: 50% 50% 0 0/100% 100% 0 0;
}

<img >

Does this answer your question? [Creating rounded corners using CSS](https://stackoverflow.com/questions/7089/creating-rounded-corners-using-css) — rx2347, May 12 '23 at 10:57
@rx2347 No, I do not want a rounded corner. I want a sharp one like the one in the picture above. — yami S, May 12 '23 at 11:03

score 2 · Accepted Answer · answered May 12 '23 at 11:10

CSS mask can approximate this:

img {
  --g: #000 100%,#0000 101%;
  -webkit-mask:
    radial-gradient(130% 100% at 130% 100%,var(--g)) top left/ 50% 80%,
    radial-gradient(130% 100% at -30% 100%,var(--g)) top right/50% 80%,
    linear-gradient(#000 0 0) bottom/100% 20%;
  -webkit-mask-repeat: no-repeat;
}

<img src="https://picsum.photos/id/1069/300/250">

How to add a sharp corner to an image

1 Answers1