Y otra más es simular la línea con un
div Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
</head>
<body>
<div style="position: absolute; top: 200px; left: 200px; height: 100px; width: 100px; background: green;"></div>
<div style="position: absolute; top: 400px; left: 400px; height: 100px; width: 100px; background: red;"></div>
<div style="position: absolute; top: 250px; left: 250px; height: 2px; width: 290px;
background: black; overflow: hidden;
-moz-transform-origin:0px 0px;
-o-transform-origin:0px 0px;
-webkit-transform-origin:0px 0px;
transform-origin:0px 0px;
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475,
M22=0.7071067811865476);"></div>
</body>
</html>