Changing the position of the resize angle

There is a block with the resize: both property.

Example of a block

So, how to change the position of this corner (you need to top right)?

Googled, found only information that its position can be changed to the bottom left, by the property direction: rtl;.

Author: HamSter, 2018-07-26
Source

4 answers

Alternatively, use the jQuery UI:

$( "#resizable" ).resizable();
@import url(https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css);

.ui-widget-content {
  padding: 1rem;
  background: #333 !important;
  color:#fff !important;
}
.ui-icon, 
.ui-widget-content .ui-icon {
  top: .5rem;
  
  top: 5px;
  right: 5px !important;
  
  background-image: url(https://iconmonstr.com/wp-content/g/gd/makefg.php?i=../assets/preview/2012/png/iconmonstr-resize-11.png&r=255&g=255&b=255) !important;
  
  background-position: 0px 0px !important;
  background-size: cover;
}
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
<div id="resizable" class="ui-widget-content">
  <h2>Resize Content</h2>
  
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, error.
  </p>
</div>
 9
Author: HamSter, 2018-07-29 18:04:58

I used to do a similar thing, it may come in handy.

   var prevDrag = document.getElementById("prev-drag");
var grab = document.getElementById("grab");

if ( grab != undefined ) {
grab.addEventListener("mousedown", function (evt) {
    evt.preventDefault();
    var Xc = evt.pageX;
    var Yc = evt.pageY;
    var oW = prevDrag.offsetWidth;
    var oH = prevDrag.offsetHeight;
    var self = evt;
    document.body.onmousemove = function (event) { 
        prevDrag.style.width = ( oW + ( event.pageX - Xc)) + "px";
        prevDrag.style.height = (oH - ( event.pageY - Yc)) + "px";
    }
    document.body.addEventListener("mouseup", function (event) {
         document.body.onmousemove = function () {};
    })
})
}
.prew-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 300px;
  margin: 0 auto;;
} 

.prev-drag {
    width: 60px;
    height: 60px;
    display: block;
    background-color: red;
    transition: .1s all;
    box-sizing: border-box;
    position: relative;
    border: 1px solid #fff;
}

#grab {
    position: absolute;
    right: -5px;
    top: -5px;
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 5px 5px #fffffff0;
    background-color: #ff3030;
    background-origin: border-box;
    cursor: pointer;
}
<div class="prew-container">
		<div class="prev-drag" id="prev-drag" style="width: 100px; height: 100px;">
			<div id="grab"></div>
		</div>
</div>
 2
Author: Get-Web, 2019-01-09 19:28:44

You can flip vertically twice

#wrap {
    border: 2px solid red;
    width: 100px;
    height: 100px;
    resize: both;
    overflow: auto;
    transform: scale(1, -1);
}

#content {
    transform: scale(1, -1);
    height: 100%;
}
<div id="wrap">
    <div id="content">
        123
    </div>
</div>
 1
Author: Nick, 2018-07-30 12:42:14

Then it simplifies everything. You can do this.

.block {
  width: 200px;
  height: 100px;
  background: background;
  resize: both;
  overflow: auto;
  transform: scale(1, -1);
}
<div class="block"></div>

With textarea, you need to twist the font there somehow. Probably it is possible somehow and more beautiful, but there already JS should be pulled

 0
Author: BlackStar1991, 2018-07-29 17:45:47