倾斜文本容器 [英] Slanted text container

问题描述

我想知道是否有人知道是否可以做出像这样的东西：

I was wondering if any of you knew if it was possible to make anything looking like this :

我知道 http://www.infimum.dk/HTML/slantinfo.html 但我无法在倾斜区域中放置任何文字。

I know about http://www.infimum.dk/HTML/slantinfo.html but I can't put any text in the slanted areas.

推荐答案

有一点javascript：http://jsfiddle.net/billymoon/AvmE8/

Did it with a bit of javascript: http://jsfiddle.net/billymoon/AvmE8/

但这只是为了方便起见，您可以使用HTML 。

But that is just for convenience, you can do the same with HTML.

不适用于所有情况，需要一些调整，但可以使你知道的大致长度的工作 - 或知道上限的

Will not apply to all circumstances, and will need a little tweaking, but can be made to work for things you know the approximate length of - or know the upper bound of.

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

这篇关于倾斜文本容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！