<img src="https://picsum.photos/id/91/300/300" alt="A man holding a camera">
<img src="https://picsum.photos/id/550/300/300" alt="A women looking at a city" style="outline-color: #92755f;">

@property --a { 
  syntax: "<angle>";
  initial-value: 0deg; 
  inherits: true;
}
@property --d { 
  syntax: "<percentage>";
  initial-value: 0%; 
  inherits: true;
}
img {
  --b: 10px; /* control the border thickness */
  --g: 20px; /* control the gap */
  
  --d: 30%;
  --a: 45deg;
  --_o:50% + (var(--d) + var(--g) + var(--b));
  --_i:50% + (var(--d) + var(--g));
  --_f:50% + (var(--d));
  clip-path: polygon(
    /*  */
    calc(var(--_o)*sin(-45deg + var(--a))) calc(var(--_o)*cos(-45deg + var(--a))),
    calc(var(--_o)*sin( 45deg + var(--a))) calc(var(--_o)*cos( 45deg + var(--a))),
    calc(var(--_o)*sin(135deg + var(--a))) calc(var(--_o)*cos(135deg + var(--a))),
    calc(var(--_o)*sin(225deg + var(--a))) calc(var(--_o)*cos(225deg + var(--a))),
    calc(var(--_o)*sin(-45deg + var(--a))) calc(var(--_o)*cos(-45deg + var(--a))),
    /*  */
    calc(var(--_i)*sin(-45deg + var(--a))) calc(var(--_i)*cos(-45deg + var(--a))),
    calc(var(--_i)*sin(225deg + var(--a))) calc(var(--_i)*cos(225deg + var(--a))),
    calc(var(--_i)*sin(135deg + var(--a))) calc(var(--_i)*cos(135deg + var(--a))),
    calc(var(--_i)*sin( 45deg + var(--a))) calc(var(--_i)*cos( 45deg + var(--a))),
    calc(var(--_i)*sin(-45deg + var(--a))) calc(var(--_i)*cos(-45deg + var(--a))),
    /*  */
    calc(var(--_f)*sin(-45deg + var(--a))) calc(var(--_f)*cos(-45deg + var(--a))),
    calc(var(--_f)*sin( 45deg + var(--a))) calc(var(--_f)*cos( 45deg + var(--a))),
    calc(var(--_f)*sin(135deg + var(--a))) calc(var(--_f)*cos(135deg + var(--a))),
    calc(var(--_f)*sin(225deg + var(--a))) calc(var(--_f)*cos(225deg + var(--a))),
    calc(var(--_f)*sin(-45deg + var(--a))) calc(var(--_f)*cos(-45deg + var(--a)))
  );
  outline: 166px solid #2c2c2c; /* color here */
  outline-offset: 2px; /* a small value to avoid a visual glitch */
  cursor: pointer;
  transition: --d .3s,--a .2s .2s;
}
img:hover {
  --a: 0deg;
  --d: 71%;
  transition: --a .3s,--d .2s .2s;
}


body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  grid-auto-flow: column;
  gap: 30px;
  background: #556270;
}