.picture
  img(src='https://source.unsplash.com/random/300x300')
  

body
  min-height 100vh
  display flex
  align-items center
  justify-content center
  background hsl(280, 80%, 50%)
  
:root
  --size 50
  --border 10
  
.picture
  --clip polygon(0 calc(100% - (var(--border) * 1px)), 50% 0, 100% calc(100% - (var(--border) * 1px)))
  height calc(var(--size) * 1vmin)
  width calc(var(--size) * 1vmin)
  background black
  position relative
  -webkit-clip-path var(--clip)
  clip-path var(--clip)
  
  img
    --b calc(var(--border) * 1px)
    --clip polygon(var(--b) calc(100% - var(--b)), 50% var(--b), calc(100% - var(--b)) calc(100% - var(--b)))
    position absolute
    top 50%
    left 50%
    height calc(100% - (2 * var(--b)))
    width calc(100% - (2 * var(--b)))
    transform translate(-50%, -50%)
    -webkit-clip-path var(--clip)
    clip-path var(--clip)