.resize__wrap
  .resize
    .resize__content
View Compiled
*
  box-sizing border-box
  
body
  min-height 100vh
  background hsl(280, 30%, 50%)
  
.resize
  min-width 10vmin
  background hsl(180, 50%, 50%)
  resize horizontal
  overflow auto
  // position absolute

  
  &__wrap
    position absolute
    top 50%
    left 50%
    transform translate(-50%, -50%)
  
  &__wrap:after
    content ''
    position absolute
    bottom 0
    right 0
    height 30px
    width 30px
    background hsl(180, 60%, 90%)
    $clip = $clip = polygon(0 100%, 100% 100%, 100% 0)
    clip-path $clip
    -webkit-clip-path $clip
    pointer-events none
    transform translate(2px, 2px)
    
  &__wrap:before
    content ''
    position absolute
    bottom 0
    right 0
    height 30px
    width 30px
    background hsl(180, 0%, 30%)
    $clip = polygon(0 100%, 100% 100%, 100% 0)
    clip-path $clip
    -webkit-clip-path $clip
    pointer-events none
    transform translate(6px, 6px)
  
  &__content
    width 100%
    aspect-ratio 1 / 1
    
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.