对角手风琴分隔线和倾斜的文字流

Question

小提琴（您可能需要调整结果窗格的大小）：http://jsfiddle.net/BxVrf/1/

目标：

问题：

0）正如你所看到的，我在平面设计方面比在代码方面要好得多。

1）我试图让手风琴标签对角线（目前我可以让它与垂直div明显地工作）但是，如果没有创建一个巨大的图像，我找不到与分辨率无关的方法。使用渐变将不起作用，因为我使用框阴影，并将显示透明边框。无论有没有zAccordion，CSS变换也会得到不太理想的结果（我已经在小提琴中对它们进行了评论）。

2）我希望CSS文本流程如下图所示。我发现CSS Text Wrapper不太理想，并且在这里的其他地方发布了一个小提琴，如下所示，它再次返回不太理想的结果，目前还没有在Fiddle挂起的第一个问题得到解决：

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

如果有人能指出我正确的方向，我会永远感激。

Answer 1

您正在寻找倾斜不旋转，

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

这是您更新的小提琴解决方案

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