Resizable diagonal line in a div with css

user_14345508 0
Viewed 108

I need help with a rectangular div whose diagonal length in increased or decreased using js. I want to insert a line in diagonal to label diagonal length as diagonal is minimized or maximized using the +/- buttons.

I want the line to resize automatically without loosing quality. I want to keep the background color green and the image and label color to be white. For that i want to use css to draw line instead of a image. I have attached image of how div should looks like.

Thanks alot for the support.

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>

css html jquery javascript
1 Answers

You can use another div with a 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>

user_153359540
Related