.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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.