Javascript 使用css在div中调整对角线大小

我需要一个矩形div的帮助，它的对角线长度使用js增加或减少。我想在对角线中插入一条线来标记对角线长度，因为使用+/-按钮可以最小化或最大化对角线

我想线自动调整大小，而不失去质量。我想保持背景色为绿色，图像和标签颜色为白色。为此，我想使用css来绘制线，而不是图像。我附上了div应该是什么样子的图片

非常感谢你的支持

function max（）{
var w=document.getElementById（'resizable'）.clientHeight；
var h=document.getElementById（'resizeable'）.clientWidth；
document.getElementById（'可调整大小'）.style.height=h+5+'px'；
document.getElementById（'resizable'）.style.width=w+5+'px'；
}
函数min（）{
var w=document.getElementById（'resizable'）.clientHeight；
var h=document.getElementById（'resizeable'）.clientWidth；
document.getElementById（'可调整大小'）.style.height=h-5+'px'；
document.getElementById（'resizable'）.style.width=w-5+'px'；
}

Max（+）
最小（-）

您可以使用另一个具有

位置的div:absolute

const dash=document.getElementById（'dash'））
const div=document.getElementById（'可调整大小'）
函数getLength（）{
dash.textContent=Math.floor（Math.sqrt（（Math.pow（div.clientHeight，2）+Math.pow（div.clientWidth，2）））
}
函数max（）{
var h=document.getElementById（'resizeble'）.clientHeight；
var w=document.getElementById（'resizeable'）.clientWidth；
常数角=数学常数（h/w）*180/Math.PI；
document.getElementById（'可调整大小'）.style.height=h+5+'px'；
document.getElementById（'resizable'）.style.width=w+5+'px'；
dash.style.transform=`旋转（${angle}deg）`；
getLength（）
}
函数min（）{
var h=document.getElementById（'resizeble'）.clientHeight；
var w=document.getElementById（'resizeable'）.clientWidth；
常数角=数学常数（h/w）*180/Math.PI；
document.getElementById（'可调整大小'）.style.height=h-5+'px'；
document.getElementById（'resizable'）.style.width=w-5+'px'；
dash.style.transform=`旋转（${angle}deg）`；
getLength（）
}
getLength（）

#可调整大小{
边框：1px纯黑；
背景颜色：绿色；
宽度：100px；
高度：50px；
位置：绝对位置；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
#冲刺{
位置：绝对位置；
文本对齐：居中；
内容：“；
线高：0；
宽度：150%；
高度：1px；
背景色：#fff；
变换：旋转（26.5度）；
}

Max（+）
最小（-）

非常感谢您的帮助！成功了！如何将标签放置在此对角线的中心以显示对角线长度。更改

#dash

标记内的文本应该可以做到这一点：）我已编辑了上述代码以动态查看对角线长度标签