<div class="photo"></div>

* {
  box-sizing: border-box;
}

body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23969696' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
}

.photo {
  --w: 10px;
  position: relative;
  width: 250px;
  padding: var(--w);
  background: url("https://images.unsplash.com/photo-1573865526739-10659fec78a5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=358&h=358&q=80") no-repeat 0 0 / 100% 100%;
  clip-path: polygon(50% 0, 62% 6%, 75% 6%, 83% 18%, 94% 25%, 94% 38%, 100% 50%, 94% 62%, 94% 75%, 82% 82%, 75% 94%, 62% 94%, 49% 100%, 38% 93%, 25% 94%, 17% 81%, 6% 75%, 6% 61%, 0 50%, 6% 38%, 7% 24%, 17% 17%, 25% 6%, 39% 6%);
}

.photo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.35);
  clip-path: inherit;
}

.photo::after {
  content: '';
  display: block;
  width: 100%;
  padding-bottom: 100%;
  background: inherit;
  background-position: calc(-1 * var(--w)) calc(-1 * var(--w));
  background-size: calc(100% + var(--w) * 2) calc(100% + var(--w) * 2);
  clip-path: inherit;
}