resizer

by kazu69

HTML

<div id="resize"></div>

SCSS

$vendor-prefixes: '-webkit-' '-moz-' '-ms-' '-o-' '';

@mixin vendor-prop($prop, $value) {
  @each $p in $vendor-prefixes {
    #{$prop}: #{$p + $value};
  }
}

#resize {
    resize: both; /* または horizontal, vertical */
    overflow: auto; /* visible 以外 */
    width: 100px;
    height: 100px;
    background: #ccc;
    background-position: 100% 100%;
    background-size: 20px 20px;
    background-repeat: no-repeat;
     @include vendor-prop(background-image, linear-gradient(red, red));
}
#resize::-webkit-resizer,
#resize::-webkit-scrollbar-corne {
     visibility: hidden;
}
#resize:active {
  cursor: move;
}