css形状内的随机文本

Question

我需要在css形状内放置一些文本。我已经完成了这个形状。现在我的问题是，如何根据文本内容的高度来调整形状的高度？现在内容比形状更长。

下面是代码：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

不要最初设置的DIV的高度为0，这样就可以判断的div客户高度，并分配给边框宽度。而然后将高度设置为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'; 

这里是工作提琴：http://jsfiddle.net/uE6x4/4/