Javascript 对角手风琴分隔符和倾斜文本流

Fiddle（您可能需要调整结果窗格的大小）：

目标：

问题:

正如你所看到的，我在图形设计方面比在代码方面要好得多

1） 我正试图让手风琴标签对角（目前我可以让它与垂直div一起清晰地工作），但除了创建一个巨大的图像，我找不到一个独立于分辨率的方法来实现这一点。使用渐变将不起作用，因为我使用的是长方体阴影，将显示一个透明的边框。CSS转换也给出了不太理想的结果，无论是否使用zAccordion（我已经在小提琴上注释了它们）

2） 我希望CSS文本流如下图所示。我发现CSS文本包装器不太理想，在这里的其他地方发布了一个Fiddle，如下所示，它返回的结果也不太理想，目前不在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;
}

var元素、宽度、高度、字体大小、段落数、线宽、行数、偏移增量、最大值；
element=jQuery（'p.all'）；
宽度=元素。宽度（）；
高度=元素高度（）；
fontSize=element.css（'font-size'）；
numberof段落=元素长度；
lineHeight=数学地板（parseInt（fontSize.replace（'px'，''））*1.5）；
numberOfLines=高度/线宽*段落数；
偏移增量=8.5；
最高值=数学楼层（线数*偏移增量）；
对于（var index=0；index您正在寻找的是倾斜而不是旋转

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

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

：）好吧，至少你现在可以同意平面设计！==网页设计不是很确定，但我会劝阻你不要这样做。告诉您的客户您犯了一个可怕的错误，并重新起草了您的web概念；）我能想到的唯一方法是让每一行都有一个a，并稍微偏移到上面的一行。这将给你的效果，但你将有大量的div的潜力，使动画缓慢或锯齿。倾斜元素，但是你会得到稍微“斜体”类型的字体。你必须将文本包装在另一个元素（
p
maybe）中，并对其应用负值unskew。不幸的是，边距也将不倾斜，因此度量值将再次看起来像方形块，而不是您想要的菱形。谢谢尽管有一些事情：更新了
transform origin
属性、上面的偏移文本片段和文本的相应倾斜偏移量，但仍然有一些纠结需要解决——最重要的是，如何让最正确的手风琴显示出来？欢迎你的想法！同意@jBarks thatnx进行改进^^^另外，最后一个手风琴面板在激活时被切断（这可能是一个简单的修复，但我现在早上6点就忘了）：很高兴看到它工作了，别忘了添加，文本对齐：在#一，#二#三中对齐。。。。这将使段落格式正确。好吧，你的回答只是反映了我们在对上述问题的评论中已经讨论过的内容。。。还是我错了？