用css调整div中对角线的大小

Question

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

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

非常感谢您的支持。

Div演示图像

function max(){
var w = document.getElementById('resizable').clientHeight;
var h = document.getElementById('resizable').clientWidth;
document.getElementById('resizable').style.height = h + 5 +'px';
document.getElementById('resizable').style.width= w + 5 +'px';

}


function min(){
var w = document.getElementById('resizable').clientHeight;
var h = document.getElementById('resizable').clientWidth;
document.getElementById('resizable').style.height = h - 5 +'px';
document.getElementById('resizable').style.width= w - 5 +'px';

}

<button class="btn" id="increase" onClick="max()">Max (+)</button>
<button class="btn" id="decrease" onClick="min()">Min (-)</button>
<div id="resizable" style="border:1px solid black;background-color:green;width:100px;height:50px;">
</div>

Answer 1

您可以将另一个div与position:absolute一起使用

const dash = document.getElementById('dash')
const div = document.getElementById('resizable')
function getLength() {
dash.textContent = Math.floor(Math.sqrt((Math.pow(div.clientHeight, 2) + Math.pow(div.clientWidth, 2))))
}
function max() {
var h = document.getElementById('resizable').clientHeight;
var w = document.getElementById('resizable').clientWidth;
const angle = Math.atan(h / w) * 180 / Math.PI;
document.getElementById('resizable').style.height = h + 5 + 'px';
document.getElementById('resizable').style.width = w + 5 + 'px';
dash.style.transform = `rotate(${angle}deg)`;
getLength()
}

function min() {
var h = document.getElementById('resizable').clientHeight;
var w = document.getElementById('resizable').clientWidth;
const angle = Math.atan(h / w) * 180 / Math.PI;
document.getElementById('resizable').style.height = h - 5 + 'px';
document.getElementById('resizable').style.width = w - 5 + 'px';
dash.style.transform = `rotate(${angle}deg)`;
getLength()
}
getLength()

#resizable {
border: 1px solid black;
background-color: green;
width: 100px;
height: 50px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
#dash {
position: absolute;
text-align: center;
content: "";
line-height: 0;
width: 150%;
height: 1px;
background-color: #fff;
transform: rotate(26.5deg);
}

<button class="btn" id="increase" onClick="max()">Max (+)</button>
<button class="btn" id="decrease" onClick="min()">Min (-)</button>
<div id="resizable">
<div id="dash"></div>
</div>