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){
    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 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);
    var line_offset = offset/(total_lines-1);
    for(var i=0;i<total_lines;i++){
        var left_offset = line_offset * i;
        var right_offset = offset-left_offset;
        console.log(left_offset,right_offset);
        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 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;
}
rhomboit(document.getElementById('rhombus'),150);