resize a bottom right positioned popup

When an element is positioned to bottom right, try to change the resize handle to the top left of the element.

by megaadriano

HTML

<div class="bottomright-with-nw-resize-outer bgcolorstack">
	<div class="bottomright-with-nw-resize-inner">
		<p>
			Lorem ipsum content Lorem ipsum content Lorem ipsum content.<br>
			Lorem ipsum content Lorem ipsum content Lorem ipsum content.
		</p>
	</div>
</div>

<h1>Resize a bottom right positioned popup</h1>

<p>
	<em><b>WARNING</b></em>	This code relies on a hack.<br>
	What happens on resizing a rotated element is by no means clearly defined in any standards. <br>
	It seems to work as expected in Chrome.
</p>

<p>
  The core trick is a <code>resize: both;</code>
	combined with 2x <code>transform: rotationZ(180);</code>. <br>
	This is very experimental, but seems to work with just some css and an extra wrapping container element.
</p>

CSS

.bottomright-with-nw-resize-outer {
	 /* Here's the trick: rotate the entire element so the resize handle is in the other corner. */
	transform: rotateZ(180deg);
	/* Note that in order to make resize: both work, an overflow is needed with anything other than visible.
	   Set it to auto so we don't see scrollbars,
	   but this element should never actually overflow as the only child has fixed 100% width and height.
	*/
	resize: both;
	overflow: auto;
	/* Need a little padding for this element for the resize handle to be clickable.
	   Also note the rotation flips the directions that need padding. */
	padding: 0 8px 8px 0;
	/* Should work for position fixed or absolute, as long as it is bottom/right positioned. */

	/* initial size can be anything, but usually wise to set it to something sensible initially. */
	height: 100px;
	width: 100px;
}

.bottomright-with-nw-resize-inner {
	/* Rotate everything back so content is right way up: */
	transform: rotateZ(180deg);
	/* Grow along with resizable parent: */
	width: 100%;
	height: 100%;
	/* make contents scrollable if resizable parent gets to small: */
	overflow: auto;
}


/* --- Unrelated css below: --- */

/* reset css */
* {
	box-sizing: border-box;
}
html, body {
	margin:0;
	padding: 0;
	min-height: 100%;
	min-width: 100%;
}

/* This helps showing outlines of elements. Deeper nested elements get darker.  */
.bgcolorstack,
.bgcolorstack * {
	background-color: rgba(0, 0, 0, 0.2);
}

code {
	display: inline-block;
	background-color: #ddd;
	outline: 1px dashed #888;
	padding: 1px 2px;
	margin: 1px;
}

h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	padding:0;
	margin: 2px 0;
}