小提琴（您可能需要调整结果窗格的大小）：http: //jsfiddle.net/BxVrf/1/
客观的：
问题：
0) 如您所见，我在图形设计方面比在代码方面要好得多。
1）我试图让手风琴标签对角线（目前我可以让它与垂直div一起干净地工作），但是没有创建一个巨大的图像，我找不到一种独立于分辨率的方法来做到这一点。使用渐变将不起作用，因为我使用的是 box-shadow，并且会显示透明边框。无论有没有 zAccordion（我在 Fiddle 中对它们进行了注释），CSS 转换的结果也不尽如人意。
2) 我希望 CSS 文本流如底部图像所示。我发现 CSS Text Wrapper 不太理想，并且 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;
}
如果有人能指出我正确的方向，我将永远感激不尽。