10

小提琴(您可能需要调整结果窗格的大小):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;
}

如果有人能指出我正确的方向,我将永远感激不尽。

4

1 回答 1

4

您正在寻找倾斜不旋转,

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

这是您更新的 Fiddle 解决方案

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

于 2013-03-18T05:40:01.117 回答