.resizable { position: relative; display: inline-block; width: 100px; height: 100px; max-width: 100%; box-sizing: border-box; .cloneNodeWrap { position: absolute; z-index: -1; display: flex; font-size: 14px; color: #333; background-color: rgb(179 212 255 / 30%); align-items: center; justify-content: center; user-select: none; } .resizer { position: absolute; z-index: 9999; width: 10px; height: 10px; background: white; border: 3px solid #4286f4; border-radius: 50%; opacity: 0; box-sizing: border-box; } .resizer.topLeft { top: -5px; left: -5px; cursor: nwse-resize; } .resizer.topRight { top: -5px; right: -5px; cursor: nesw-resize; } .resizer.bottomLeft { bottom: -5px; left: -5px; cursor: nesw-resize; } .resizer.bottomRight { right: -5px; bottom: -5px; cursor: nwse-resize; } &.isActive { .resizer { opacity: 1; } } }