Home/ Questions/Q 7765671
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T15:13:20+00:00

Is there a way to make a triangular float so that a page looks

  • 0

Is there a way to make a triangular float so that a page looks something like the following:

            This is a sampe
        Page that has a 
    Triangle left float
That looks kind of cool.

Theoretically the content inside is naturally going to be variable, so I’d prefer to do it in an ‘automatic’ way so that when the actual words/descriptions come in it doesn’t affect where I have to place content. You have free form to use whatever HTML/CSS/JS combo, but the simpler the better =)

If it helps, Originally I tried putting divs of varying lengths float left with a clear left, but naturally when I placed the text, it came after everything and floating it right didn’t work.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s an idea: put some floating blocks next to each other, each one line higher than the next. That will create a (transparent) triangular block.

    body {line-height:1.2em}
.blk1 {float:left; width:10px; height:6.0em}
.blk2 {float:left; width:10px; height:4.8em}
.blk3 {float:left; width:10px; height:3.6em}
.blk4 {float:left; width:10px; height:2.4em}
.blk5 {float:left; width:10px; height:1.2em}

    And the HTML will be

    <div class="blk1"></div>
<div class="blk2"></div>
<div class="blk3"></div>
<div class="blk4"></div>
<div class="blk5"></div>
<div>Your text here.</div>

    Example jsFiddle. Can you work with that?

    • 0