javascript - 如何将调整大小手柄的位置更改为 DIV 的中间？

Question

以下是调整 div 大小的代码片段。

.resize-x-handle-flip {
transform: rotateX(180deg);
resize: horizontal;
overflow: auto;
width: 200px;
background:lightcyan;
}
.x-text-flip-back {
transform: rotateX(180deg);
}
.vertical-scroll { 
min-height:20px;  
resize:vertical;
overflow:auto;
}

<div class="resize-x-handle-flip">
 <div class="x-text-flip-back">
  <div class="vertical-scroll">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.<br> dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
  </div>
 </div>
</div>

在这里，我想将调整大小手柄的位置移动到 DIV 的右上角到中间。下面是相同的屏幕截图。我希望输出像随附的屏幕截图一样。

有人可以看一下并相应地更新代码片段。谢谢

标签： javascripthtmlcss