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 </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 start_width = obj.clientWidth;
    obj.style.width = (start_width-offset*2) + 'px';
    var new_height = obj.clientHeight;
    obj.style.width = start_width + 'px';
    var used_height = 0;
    var total_lines = Math.ceil(new_height/line_height);
    for(var i=0;i<total_lines;i++){
        var div = document.createElement('div');
        var left_offset = ((offset/total_lines)*i);
        var right_offset = (offset-(offset/total_lines)*i);
        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);
    }
}
rhomboit(document.getElementById('rhombus'),100,12);