html - 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/