html - 倾斜的文本容器

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'))
}