.square-image {
  position: relative;
}

/* the tilted outline — paints first */
.square-image::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid #4285F4;
  transform: rotate(5deg);
}

/* the photo, re-drawn on top of the outline */
.square-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}