<picture>
  <img src="https://picsum.photos/id/177/400/400" alt="tiger">
</picture>

@property --b {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

img {
  --b:25px; /* control the border thickness */

  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(50% 0,100% 100%,0 100%,50% 0,50% var(--b),calc(var(--b)*cos(30deg)) calc(100% - var(--b)/2),calc(100% - var(--b)*cos(30deg)) calc(100% - var(--b)/2),50% var(--b));
  background: linear-gradient(45deg,#FA6900,#C02942);
  transition: --b .6s;
}
picture {
  width: 250px;
  aspect-ratio: 1/cos(30deg);
  clip-path: polygon(50% 0,100% 100%,0 100%);
  cursor: pointer;
}
picture:hover img{
  --b: 144px
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  grid-auto-flow: column;
  background: radial-gradient(circle,#8A9B0F,#9DE0AD);
}