var invert = false;

    if(offset < 0){

        offset = Math.abs(offset);

        invert = true;

    }

    var line_height = getLineHeight(obj);

    var els = document.querySelectorAll('.rhombus_side');

    for (var i = 0; i < els.length; i++) {

        els[i].parentNode.removeChild(els[i]);

    }

    var new_height = heightWithOffset(obj, offset);

    var total_lines;

    var line_offset;

    while (true) {

        total_lines = Math.ceil(new_height / line_height);

        line_offset = offset / (total_lines);

        var next_height = heightWithOffset(obj, offset + line_offset);

        if (next_height === new_height) break;

        new_height = next_height;

    }

    for (var i = 0; i < total_lines; i++) {

        var left_offset = line_offset * (i + 1);

        var right_offset = offset - left_offset + line_offset;

        if(invert){

            var hold = left_offset;

            left_offset = right_offset;

            right_offset = hold;

        }

        var div = document.createElement('div');

        div.className = 'rhombus_side';

        div.style.width = left_offset + 'px';

        div.style.height = line_height + 'px';

        div.style.float = 'left';

        div.style.clear = 'left';

        //div.style.backgroundColor = 'red';

        obj.insertBefore(div, obj.firstChild);

        div = document.createElement('div');

        div.className = 'rhombus_side';

        div.style.width = right_offset + 'px';

        div.style.height = line_height + 'px';

        div.style.float = 'right';

        div.style.clear = 'right';

        //div.style.backgroundColor = 'blue';

        obj.insertBefore(div, obj.firstChild);

    }

}

​

function heightWithOffset(obj, offset) {

    var old_padding_left = obj.style.paddingLeft;

    obj.style.paddingLeft = (offset + 1) + 'px';

    var new_height = obj.clientHeight;

    obj.style.paddingLeft = old_padding_left;

    return new_height;

}

​

function getLineHeight(element) {

    //Thank you : http://stackoverflow.com/a/4515470/482197

    var temp = document.createElement(element.nodeName);

    temp.setAttribute("style", "border:0;margin:0px;padding:0px;font-family:" + element.style.fontFamily + ";font-size:" + element.style.fontSize);

    temp.innerHTML = "test";

    temp = element.parentNode.appendChild(temp);

    var ret = temp.clientHeight;

    temp.parentNode.removeChild(temp);

    return ret;

}

//Below this is just my showing it with positive and negative offsets

var last_offset = 150;

function toggleRhombus(){

    last_offset *= -1;

    rhomboit(document.getElementById('rhombus'), last_offset);

    setTimeout(function(){toggleRhombus()},5000);

}

toggleRhombus();

​