Is it possible to justify a text to a diagonel line in css?

Question

Is it possible to justify a text to a diagonel line in CSS/HTML?

And if yes, how, can you share some more keywords to search, or specify a path?

Like this:

enter image description here

Yes, it's possible. Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. — Kermit, Sep 26 '13 at 13:32
@FreshPrinceOfSO can you share some keywords, i searched but could not find out a path, thanks — merveotesi, Sep 26 '13 at 13:36
[Try this](http://stackoverflow.com/questions/8404350/stagger-or-stair-case-a-menu) — Kermit, Sep 26 '13 at 13:38
from your demo picture `lorem ipsum` is not `STANDART` it is `standard` ;) — DrCopyPaste, Sep 26 '13 at 13:39
Probabbly this may help you. [stackoverflow][1] [1]: http://stackoverflow.com/questions/12880524/javascript-get-style-and-increment — vishalkin, Sep 26 '13 at 13:54
If you want keywords, how about "sloping margin" or "diagonal left edge". You won't find a CSS-only solution though. — Mr Lister, Sep 26 '13 at 13:55
I found [this page](http://meyerweb.com/eric/css/edge/slantastic/demo.html) and made [this fiddle](http://jsfiddle.net/wtLUn/) based on it. — Mr Lister, Sep 27 '13 at 12:38
@MrLister thanks in advance, i am very happy to learn it is possible. i think i can thank you if you write an answer, and i accept it — merveotesi, Sep 27 '13 at 13:09

BenM · Answer 1 · 2013-09-26T14:12:34.540

Here is an example fiddle: 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>

You can of course specify a class on each div that needs to be "staircased" and use each on that instead.

NOTE: This is obviously not a pure html css solution. You could do it that way but it would not be scalable at all. This solution also requires use of jQuery

A pure html/css solution can be done like this, but it's not pretty.

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>

score 1 · Answer 2 · answered Sep 26 '13 at 14:24

<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>

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

This seems to be the closest one. I have used css3's transform skew property.

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

Working Fiddle

Play with "scale", "skew" and "rotate" of transform css3 property. you may get your result. :)

or else

Keep nested elements in list items as shown below:

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

You can also do the above trick with simple nested div elements by giving some fixed margin-left or padding-left.

Working Fiddle

Is it possible to justify a text to a diagonel line in css?

3 Answers3

or else