<div id="layer">
	Drag
	<span class="resize"></span>
</div>
* {margin: 0; padding: 0; width: 100%; height: 100%; box-sizing: border-box;}
body {position: relative;}
#layer {width: 200px; height: 200px;position: absolute; display: block; top: 50px; left: 40px; background-color: #ccc; border-radius: 15px; padding: 30px;}

.resize {display: block; position:absolute; right: -10px; bottom: -10px; width: 20px; height: 20px; border: 10px solid #000; border-top: none; border-left: 10px solid transparent; border-right: 10px solid transparent; cursor: resize; transform: rotate(135deg);}

	const flexContainer = document.getElementById('layer');
	const resizePointer = document.querySelector('.resize'); // 리사이즈 이벤트 실행 포인트 변수 선언
	let initX,
			initY,
			initWidth,
			initHeight;

	// 마우스 클릭
	function initDrag(e) {
		initX = e.clientX;
		initY = e.clientY;
		initWidth = parseInt(window.getComputedStyle(flexContainer).width, 10);
		initHeight = parseInt(window.getComputedStyle(flexContainer).height, 10);
		document.addEventListener("mousemove", resizing);
		document.addEventListener("mouseup", stopResize);
	};
	
	function resizing(e) {
		flexContainer.style.width = `${(initWidth + e.clientX - initX)}px`;
		flexContainer.style.height = `${(initHeight + e.clientY - initY)}px`;
	};
	
	function stopResize(e) {
		document.removeEventListener("mousemove", resizing);
		document.removeEventListener("mouseup", stopResize);
	};

	resizePointer.addEventListener("mousedown", initDrag, false);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.