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

Question

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

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

非常感谢您的支持。

Div Demo Image

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>