Random text inside css form

Question

I need to add text inside a css form. I already made the form. Now my problem is how to make the height of the shape according to the height of the text content? Content is now longer than form.

Here is the code: http://jsfiddle.net/uE6x4/

<div class="trapezoid"> A hella lot of lorem ipsum text goes here to test the freakin' trapezoid! </div> .trapezoid { height: 0; width: 80px; border-bottom: 80px solid blue; border-left: 40px solid transparent; } 

Answer 1

Do not set the initial height of the DIV to 0, so you can determine the height of the client div and set the width of the border. And then set the height to 0:

 .trapezoid { width: 80px; border-bottom: 80px solid blue; border-left: 40px solid transparent; } document.getElementById('xMyDiv').style.borderBottomWidth = document.getElementById('xMyDiv').clientHeight + 'px'; document.getElementById('xMyDiv').style.height = '0px'; 

Here is a working fiddle: http://jsfiddle.net/uE6x4/4/