.windowContainer { position: relative; width: 100%; height: 100%; overflow: hidden; } .window { position: absolute; //background: #fff; //border: 1px solid #000; //box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); user-select: none; pointer-events: initial; } .resizeHandle { position: absolute; //background: rgba(0, 0, 0, 0.2); width: 15px; height: 15px; } .topRight, .bottomLeft { cursor: nesw-resize; } .topLeft, .bottomRight { cursor: nwse-resize; } .topLeft { top: -7.5px; left: -7.5px; &::after { position: relative; top: 7.5px; left: 7.5px; display: block; content: " "; width: 5px; height: 5px; border-left: 1px solid var(--window-corner); border-top: 1px solid var(--window-corner); pointer-events: none; } } .topRight { top: -7.5px; right: -7.5px; &::after { position: relative; top: 7.5px; right: -2.5px; display: block; content: " "; width: 5px; height: 5px; border-right: 1px solid var(--window-corner); border-top: 1px solid var(--window-corner); pointer-events: none; } } .bottomLeft { bottom: -7.5px; left: -7.5px; &::after { position: relative; top: 2.5px; left: 7.5px; display: block; content: " "; width: 5px; height: 5px; border-left: 1px solid var(--window-corner); border-bottom: 1px solid var(--window-corner); pointer-events: none; } } .bottomRight { bottom: -7.5px; right: -7.5px; &::after { position: relative; top: 2.5px; right: -2.5px; display: block; content: " "; width: 5px; height: 5px; border-right: 1px solid var(--window-corner); border-bottom: 1px solid var(--window-corner); pointer-events: none; } } .top { top: -5px; left: 0; right: 0; height: 10px; cursor: ns-resize; } .bottom { bottom: -5px; left: 0; right: 0; height: 10px; cursor: ns-resize; } .left { top: 0; bottom: 0; left: -5px; width: 10px; cursor: ew-resize; } .right { top: 0; bottom: 0; right: -5px; width: 10px; cursor: ew-resize; }