Slanted text container

Question

I was wondering if any of you knew if it was possible to make anything looking like this :

I know about http://www.infimum.dk/HTML/slantinfo.html but I can't put any text in the slanted areas.

Answer 1

Did it with a bit of javascript: http://jsfiddle.net/billymoon/AvmE8/

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'))
}

Answer 2

Here is an example of the desired layout using the CSS shape-outside property even though it has the status of "candidate recommendation" and should not be used as it may change at any moment and has poor browser support :

DEMO (only modern webkit browsers)

Note : this layout would be much easier to make by combining shape-outside and shape-inside (i.e. no absolute positioning) but currently no browsers I know of support shape-inside.

p{
  width:550px;
  text-align:justify;
  overflow:hidden;
}
#right{
  position:absolute;
  top:0; left:355px;
}
p:before{
  content:'';
  width:40%;
  height:710px;
}
#left:before{
  float:right;
  shape-outside: polygon(100% 0, 100% 100%, 20% 100%);
}
#right:before{
  float:left;
  shape-outside: polygon(0 0, 100% 0, 20% 100%);
}

<p id="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac quam dignissim, tristique eros eget, aliquam nulla. Pellentesque dapibus mattis massa, eu dapibus arcu commodo vel. Vestibulum id suscipit felis, nec malesuada lacus. Nam lacinia elementum mauris ut lacinia. Nulla sed congue mi, in vehicula sapien. Nulla at ipsum sed metus feugiat interdum. In ultricies sem nec facilisis tincidunt. Suspendisse commodo ex sed ullamcorper gravida. Mauris velit mauris, egestas et est sit amet, ultricies mollis ipsum. Nunc sit amet quam ac nibh molestie porttitor sit amet sit amet ante. Mauris sollicitudin sit amet ligula non gravida.Curabitur auctor sollicitudin ante, ut rhoncus massa. Ut eu iaculis orci. Aliquam sit amet tortor tellus. Quisque iaculis tellus varius pellentesque blandit. Aenean sed sapien et ex vehicula bibendum. Proin nec orci id mauris semper facilisis. Vivamus massa purus, commodo et ullamcorper dignissim, dictum vitae tellus. Duis vel lacus posuere, pulvinar felis sit amet, viverra enim. Sed elementum eros et sem luctus, sed volutpat metus finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam sodales tincidunt rhoncus.Pellentesque felis dolor, tempus ac ex ac, dictum lacinia ligula. Quisque ornare hendrerit erat, tincidunt dignissim quam auctor id. Duis pellentesque enim in ante pretium luctus. Morbi dignissim enim sollicitudin augue venenatis, porta sodales tortor auctor. Mauris tincidunt dui at lectus commodo cursus. In bibendum ac nunc accumsan porta. Aliquam ac sem vitae ligula pellentesque pulvinar non in velit. In molestie diam eu vulputate iaculis. Mauris fermentum, elit sit amet tincidunt tempor, lorem arcu iaculis leo, aliquam feugiat nulla eros eu enim. Pellentesque hendrerit magna ut ligula ultricies, in euismod sapien luctus. Suspendisse potenti. Vestibulum porta malesuada egestas. Cras vehicula est a purus tempus, eu volutpat diam tempus.Integer eu est faucibus, pulvinar eros at, porta enim. Aenean nec lorem nec arcu fringilla lacinia vitae non quam. Nullam ultrices, felis vitae hendrerit luctus, mi turpis tincidunt ex, eget pulvinar nulla turpis quis tellus. Phasellus nec lorem vel turpis consectetur viverra. Cras a tellus mi. Pellentesque congue sodales orci. Curabitur at facilisis nunc. Donec vel congue metus. Suspendisse id dui leo. Aenean sed dolor aliquet, molestie justo et, sodales risus. Proin ornare sagittis lectus quis condimentum.</p>
<p id="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac quam dignissim, tristique eros eget, aliquam nulla. Pellentesque dapibus mattis massa, eu dapibus arcu commodo vel. Vestibulum id suscipit felis, nec malesuada lacus. Nam lacinia elementum mauris ut lacinia. Nulla sed congue mi, in vehicula sapien. Nulla at ipsum sed metus feugiat interdum. In ultricies sem nec facilisis tincidunt. Suspendisse commodo ex sed ullamcorper gravida. Mauris velit mauris, egestas et est sit amet, ultricies mollis ipsum. Nunc sit amet quam ac nibh molestie porttitor sit amet sit amet ante. Mauris sollicitudin sit amet ligula non gravida.Curabitur auctor sollicitudin ante, ut rhoncus massa. Ut eu iaculis orci. Aliquam sit amet tortor tellus. Quisque iaculis tellus varius pellentesque blandit. Aenean sed sapien et ex vehicula bibendum. Proin nec orci id mauris semper facilisis. Vivamus massa purus, commodo et ullamcorper dignissim, dictum vitae tellus. Duis vel lacus posuere, pulvinar felis sit amet, viverra enim. Sed elementum eros et sem luctus, sed volutpat metus finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam sodales tincidunt rhoncus.Pellentesque felis dolor, tempus ac ex ac, dictum lacinia ligula. Quisque ornare hendrerit erat, tincidunt dignissim quam auctor id. Duis pellentesque enim in ante pretium luctus. Morbi dignissim enim sollicitudin augue venenatis, porta sodales tortor auctor. Mauris tincidunt dui at lectus commodo cursus. In bibendum ac nunc accumsan porta. Aliquam ac sem vitae ligula pellentesque pulvinar non in velit. In molestie diam eu vulputate iaculis. Mauris fermentum, elit sit amet tincidunt tempor, lorem arcu iaculis leo, aliquam feugiat nulla eros eu enim. Pellentesque hendrerit magna ut ligula ultricies, in euismod sapien luctus. Suspendisse potenti. Vestibulum porta malesuada egestas. Cras vehicula est a purus tempus, eu volutpat diam tempus.Integer eu est faucibus, pulvinar eros at, porta enim. Aenean nec lorem nec arcu fringilla lacinia vitae non quam. Nullam ultrices, felis vitae hendrerit luctus, mi turpis tincidunt ex, eget pulvinar nulla turpis quis tellus. Phasellus nec lorem vel turpis consectetur viverra. Cras a tellus mi. Pellentesque congue sodales orci. Curabitur at facilisis nunc. Donec vel congue metus. Suspendisse id dui leo. Aenean sed dolor aliquet, molestie justo et, sodales risus. Proin ornare sagittis lectus quis condimentum.</p>

This property can also (combined with the clip-path) alow you to slant text next to a cliped image:

DEMO (modern webkit browsers only)

References:

• browser support chart
• MDN shape-outside
• more to read and learn about CSS shapes and ways to clip content around and inside non rectangular shapes: Non-Rectangular Layouts With CSS, html5rocks, alistapart

Answer 3

Thinking out loud here, but what if you have 2 side by side vertical divs. In the left div use Eric Meyer's Slantastic technique on the right side. In the right div use it on the left side.