是否可以将文本证明为css中的对角线？

Question

是否可以在CSS / HTML中将文本对齐到对角线？

如果是，如何，您可以共享更多关键字进行搜索，还是指定路径？

像这样：

Answer 1

以下是一个示例小提琴：http://jsfiddle.net/JrM3x/

var cssmargin = 10;

$('div').each(function(){
    $(this).css("margin-left", cssmargin+"px");
    cssmargin += 10;
});

<div>
    <div>hello world</div>
    <div>how are you today?</div>
    <div>I'm good thanks</div>
</div>

你当然可以在每个div上指定一个需要“阶梯化”的类，并在每个div上使用它们。

注意：这显然不是纯粹的html css解决方案。你可以这样做，但根本不可扩展。此解决方案还需要使用jQuery

纯粹的html / css解决方案可以像这样完成，但它并不漂亮。

http://jsfiddle.net/JrM3x/1/

#one{ margin-left:10px;}
#two{margin-left:20px;}
#three{margin-left:30px;}

<div>
    <div id="one">hello world</div>
    <div id="two">how are you today?</div>
    <div id="three">I'm good thanks</div>
</div>

Answer 2

<style>
div {margin-left:10px;}
div+div {margin-left:20px;}
div+div+div{margin-left:30px;}
div+div+div+div{margin-left:40px;}
</style>

<div>Lorem Ipsum is simply dummy text of the printing and </div><br>
<div>typesetting industry. Lorem Ipsum has been the industry's </div> <br>
<div>standard dummy text ever since the 1500s, when an unknown </div><br>
<div>printer took a galley of type and scrambled it to make a type </div> 

Answer 3

这似乎是最接近的一个。我使用过css3的变换偏斜属性。

body>div {
    -webkit-transform: skewX(30deg);
    margin-left: 50px;
    margin-top: 50px;
    font-style: italic;
}

Working Fiddle

使用transform css3属性的“比例”，“倾斜”和“旋转”进行游戏。你可能得到你的结果。 ：）

或者

将嵌套元素保留在列表项中，如下所示：

<ul>
    <li>this is first line
        <ul>
            <li>this is second line
                <ul>
                    <li>this is third line</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

你也可以通过给出一些固定的margin-left或padding-left来使用简单的嵌套div元素进行上述技巧。

Working Fiddle