Доделать не успеваю - надо бежать в столовую...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
<style>
* {
margin:0;
padding:0;
}
#line {
position: relative;
top: 100px;
left: 100px;
width: 101px;
height: 101px;
}
.line1, .line2 {
position: absolute;
width: 0px;
height: 0px;
font-size: 0px;
border-right: 100px solid #000;
border-left: 0px solid #000;
border-top: 100px solid transparent;
}
.line2 {
left: 1px;
top: 1px;
border-right-color: #fff;
border-left-color: #fff;
border-top-color: transparent;
}
.lb, .rt {
position: absolute;
width: 2px;
height: 2px;
font-size: 0px;
background: #f00;
border: 2px solid #000;
z-index: 1;
cursor: pointer;
}
.lb {
left: 0px;
bottom: 0px;
}
.rt {
right: 0px;
top: 0px;
}
#tra {position: absolute;}
</style>
</head>
<body>
<div id="tra"></div>
<div id="line"><div class="line1"></div><div class="line2"></div><div id="lb" class="lb"></div><div id="rt" class="rt"></div></div>
<script type="text/javascript">
function $(i){return document.getElementById(i)}
function trace(m){$('tra').innerHTML = m}
function Down(e){
e = e || window.event;
var type = this.className;
var o = $('line');
o.StartWidth = o.offsetWidth;
o.StartHeight = o.offsetHeight;
o.StartX = e.clientX;
o.StartY = e.clientY;
document.onmousemove = function(evt){
evt = evt || window.event;
switch(type) {
case 'lb': var w = o.StartWidth + o.StartX - evt.clientX;
var h = o.StartHeight - o.StartY + evt.clientY;
break;
case 'rt': var w = o.StartWidth - o.StartX + evt.clientX;
var h = o.StartHeight + o.StartY - evt.clientY;
break;
}
var left = width = false;
if(h<0){
h=-h;
left = true;
}
if(w<0){
w=-w;
left = width = true;
}
trace('left = '+left+'<br>width = '+width+'<br>type = '+type+'<br>');
if(left){
o.firstChild.style.borderRightWidth = o.childNodes[1].style.borderRightWidth = '0px';
o.firstChild.style.borderLeftWidth = o.childNodes[1].style.borderLeftWidth = o.style.width = w + 'px';
o.childNodes[1].style.left = '-1px';
if (width&&type=='rt') o.style.left = evt.clientX + 'px';
if (!width&&type=='lb') o.style.top = evt.clientY + 'px';
}
else {
o.firstChild.style.borderLeftWidth = o.childNodes[1].style.borderLeftWidth = '0px';
o.firstChild.style.borderRightWidth = o.childNodes[1].style.borderRightWidth = o.style.width = w + 'px';
o.childNodes[1].style.left = '1px';
if (type=='rt') o.style.top = evt.clientY + 'px';
else o.style.left = evt.clientX + 'px';
}
o.firstChild.style.borderTopWidth = o.childNodes[1].style.borderTopWidth = o.style.height = h + 'px';
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
}
$('lb').onmousedown = Down;
$('rt').onmousedown = Down;
</script>
</body>
</html>