JSFiddle - React, Tailwind, and code Playground

by Travis Harris

HTML

<div id='rhombus' style='border:1px solid black'>This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text </div>

JavaScript

function rhomboit(obj,offset,line_height){
    var els = document.querySelectorAll('.rhombus_side');
    for(var i = 0; i < els.length; i++) {
      els[i].parentNode.removeChild(els[i]);
    }
    var old_padding_left = obj.style.paddingLeft;
    obj.style.paddingLeft = (offset+1) + 'px';
    var new_height = obj.clientHeight;
    obj.style.paddingLeft = old_padding_left;
    var used_height = 0;
    var total_lines = Math.ceil(new_height/line_height);
    for(var i=0;i<total_lines;i++){
        var left_offset = ((offset/total_lines)*i);
        var right_offset = (offset-(offset/total_lines)*i);
        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);
    }
}
rhomboit(document.getElementById('rhombus'),100,1);