На SVG
Типа, прикол, за правильность работы во всех браузерах не отвечаю :-)
<html>
<head>
<title>SVG test</title>
</head>
<body>
<div style="width:200px;height:200px" id="d1">
</div>
Height(10-140): <input type="text" id="height">
Width(10-140): <input type="text" id="width">
Depth(10-140): <input type="text" id="depth">
<br>
<input type="button" value="draw" onclick="f();">
<script type="text/javascript">
function f() {
var h = +document.getElementById("height").value;
var w = +document.getElementById("width").value;
var d = +document.getElementById("depth").value;
if( ! ( h>=10 && h <= 140 && w >= 10 && w <= 140 && h >= 10 && h <= 140 ) ) {
document.getElementById("d1").innerHTML = "Wrong values";
return;
}
d *= 0.3;
document.getElementById("d1").innerHTML = '<svg width="200" height="200" viewBox="0 0 200 200">'+
'<polyline stroke="black" stroke-width="2" fill="none" points="10,' +
(190-h)+','+(10+d)+','+(190-h-d)+','+(10+d+w)+','+(190-h-d)+','+(10+d+w)+','+(190-h)+','+(10+d+w)+','+(190-d)+
','+(10+w)+',190,10,190,10,'+(190-h)+','+(10+w)+','+(190-h)+','+(10+w)+','+(190)+'"/> '+
'<line stroke="black" stroke-width="2" x1="'+(10+w)+'" x2="'+(10+w+d)+'" y1="'+(190-h)+'" y2="'+(190-h-d) + '"/></svg>';
}
</script>
</body>
</html>