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/