<label>Width<input type="range" min="30" max="200" value="100"/></label>
<label>Height<input type="range" min="10" max="100" value="30"/></label>
<div class="crossed">Crossed</div>

.crossed{
  --wid: 100;
  --hei: 30;
  width: calc( 1mm * var(--wid) );
  height: calc( 1mm * var(--hei) );
  background: #996;
  margin: 0 auto;
  position: relative;
  --sum: calc( var(--wid) + var(--hei) );
  /*--sum2: calc( var(--sum) * var(--sum) );*/
  /*--diag2: calc( var(--wid) * var(--wid) + var(--hei) * var(--hei) );*/
  /*--lon: calc( var(--wid) * ( var(--sum2) / var(--diag2) + 0 ) / 2 );*/
  --lon: calc( var(--sum) / 1.5 );
  --ang: calc( var(--hei) / var(--sum) );
}
.crossed:before, .crossed:after{
  --ang: inherit;
  --wid: inherit;
  --hei: inherit;
  --lon: inherit;
  content: '';
  position: absolute;
  width: calc( 1mm * var(--lon) - 2mm );
  height: 3mm;
  top: 50%;
  left: calc( 1mm * var(--wid) / 2 );
  margin: -1.5mm calc( -1mm * var(--lon) / 2 + 1mm );
  background: #c44;
}
.crossed:before{
  transform: rotate( calc( -10deg + 110deg * var(--ang) ) );
}
.crossed:after{
  transform: rotate( calc( 10deg - 110deg * var(--ang) ) );
}

const props = [ '--wid', '--hei' ];
const cd = document.querySelector( '.crossed' );
document.querySelectorAll( 'input' ).forEach( (r,i) => {
  r.oninput = e => cd.style.setProperty( props[i], r.valueAsNumber );
} )