倾斜的文本容器

Question

我想知道你们中是否有人知道是否有可能做出这样的事情:

我知道http://www.infimum.dk/HTML/slantinfo.html但我不能在倾斜的区域放任何文字.

Answer 1

用一点javascript做了:http://jsfiddle.net/billymoon/AvmE8/

但这只是为了方便起见,你可以用HTML做同样的事情.

不适用于所有情况,需要稍微调整,但可以使你知道大概长度的东西 - 或者知道上限.

HTML:

<div id='left'>whatever text</div><div id='right'>random text</div>

CSS:

#left, #right{
    text-align: justify;
    position: absolute;
    width:60%;
    right:0;
}
#right{
    right:auto;
    left:0;
}

JS:

for (i = 1; i < 40; i++) {
    $('<div />').css({
        border: '1px solid silver',
        height: 10,
        width: (5 * i),
        float: 'left',
        clear: 'left'
    }).prependTo($('#left'))
    $('<div />').css({
        border: '1px solid gold',
        height: 10,
        width: (200 - (5 * i)),
        float: 'right',
        clear: 'right'
    }).prependTo($('#right'))
}