倾斜文本容器 [英] 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屋!