Diagonal accordion dividers and skewed text flow

Question

Fiddle (you may have to resize results pane): http://jsfiddle.net/BxVrf/1/

Objective:

Problem:

0) As you can see, I am much better at graphic design than I am at code.

1) I am trying to have the accordion tabs diagonal (currently I can get it to work cleanly with vertical divs obviously), but short of creating a huge image I can't find a resolution-independent way of doing this. Using gradients will not work as I am using box-shadow, and a transparent border will show. CSS transforms also give less than optimal results, with or without zAccordion (I have commented them out in the Fiddle).

2) I would like CSS text flows as in the bottom image. I've found CSS Text Wrapper which is less than ideal, and a Fiddle posted elsewhere on here as follows, which again, returns less than ideal results and is currently not in the Fiddle pending first problem being solved:

var element, width, height, fontSize, numberOfParagraphs, lineHeight, numberOfLines, offsetIncrement, highestValue;
element = jQuery('p.all');
width = element.width();
height = element.height();
fontSize = element.css('font-size');
numberOfParagraphs = element.length;
lineHeight = Math.floor(parseInt(fontSize.replace('px','')) * 1.5);
numberOfLines = height/lineHeight*numberOfParagraphs;
offsetIncrement = 8.5;
highestValue = Math.floor(numberOfLines*offsetIncrement);

for(var index = 0; index <= numberOfLines; index++) {
    element.eq(0).before('<span class="text-offset" style="width: '+highestValue+'px; float: left; height: '+lineHeight+'px; clear: both;"/>');
    highestValue = highestValue-offsetIncrement;
}

If anyone can point me in the right direction, I would be eternally grateful.

Answer 1

You are looking for Skew not Rotate,

transform: skewX(20deg) skewY(0deg); /* W3C */
-webkit-transform: skewX(350deg) skewY(0deg); /* Safari & Chrome */
-moz-transform: skewX(350deg) skewY(0deg); /* Firefox */
-ms-transform: skewX(350deg) skewY(0deg); /* Internet Explorer */
-o-transform: skewX(350deg) skewY(0deg); /* Opera */

Here is your updated Fiddle with solution

http://jsfiddle.net/BxVrf/9/