html – 倾斜的文本容器

前端之家收集整理的这篇文章主要介绍了html – 倾斜的文本容器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想知道,如果有人知道是否有可能做任何看起来像这样:

我知道约http://www.infimum.dk/HTML/slantinfo.html,但我不能把任何文字放在倾斜的地方.

解决方法

有一点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',width: (200 - (5 * i)),float: 'right',clear: 'right'
    }).prependTo($('#right'))
}
原文链接:https://www.f2er.com/html/229366.html

猜你在找的HTML相关文章