jquery - 实现这种背景效果的css样式

Question

我收到了一个转换为网站的设计。它看起来很棒而且没有挑战性，除了菜单。

菜单是一个简单的 Accordion 菜单，但设计本身就让我着迷。

菜单应该是这样的(分别没有掉落和掉落):

Not Dropped http://photostand.co.za/images/7otfr8llxeeochyq4h4i.jpg Dropped http://photostand.co.za/images/vyzfbxqj4cdiyaxmfbv6.jpg

我正在努力解决的问题是绿色的背部钻头。

我知道如何旋转，但旋转会旋转一切。

这是我正在使用的 Accordion 脚本:

$("#accordion > li > div").click(function(){
    if(false == $(this).next().is(':visible')) {
        $('#accordion ul').slideUp(300);
    }
    $(this).next().slideToggle(300);
});

这是 CSS:

#accordion { list-style: none; padding: 0 0 0 0; width: 175px; font-size:13px; }
#accordion div { font-weight: bold; margin-top: 10px; cursor: pointer; text-align:center; border:2px black solid; vertical-align:center; height:30px; padding: 5 5 5 7px; list-style: circle; }
#accordion ul { text-align:center; list-style: none; padding: 0 0 0 0; }
#accordion ul { display: none; }
#accordion ul li { font-weight: normal; vertical-align:center; height:30px; cursor: auto; padding: 0 0 0 7px; border: thin solid black; margin-top: 2px; width:110px; margin-left:55px; background:#ffffff; }
#accordion ul li:hover { background:#d0d4d7 }
#accordion a { text-decoration: none; color:#000; }
#accordion a:hover { text-decoration: none; color:#000; }

这是 HTML:

<ul id="accordion">
    <div>Park Home</div>
    <li><div>Travel</div>
        <ul>
            <li><a href="#">Activities and Facilities</a></li>
            <li><a href="#">Code of Conduct</a></li>
            <li><a href="#">How to get there</a></li>
            <li><a href="#">Maps</a></li>
            <li><a href="#">What to Expect</a></li>
            <li><a href="#">Fees</a></li>
        </ul>
    </li>
    <li><div>Fauna and Flora</div>
        <ul>
            <li><a href="#">Birding</a></li>
            <li><a href="#">Mammals</a></li>
            <li><a href="#">Reptiles and Amphibians</a></li>
            <li><a href="#">Vegetation</a></li>
            <li><a href="#">Invertabrates</a></li>
        </ul>
    </li>
    <div>Construction Progress</div>
    <div>History</div>
    <div>Careers</div>
    <li><div>Contact Us</div>
        <ul>
            <li><a href="#">Contact Details</a></li>
            <li><a href="#">Enquiries</a></li>
        </ul>
    </li>
</ul>

谁能帮助我。到目前为止我尝试的一切都失败了。

更新 1(2012 年 9 月 20 日 16:49 CAT)

我在这方面取得了一些进展。我实际上让它看起来像我想要的样子。我现在只需要让绿色的部分像其他部分一样滑下来。在这里看看:http://jsfiddle.net/pNxBU/1/ (旁注:间距有点偏离，可以这么说，因为它脱离了“上下文”。

所以现在如果有人可以帮助我让这些东西与他们的 div 一起移动......嗯......

Answer 1

希望这段代码能帮到你

var tranform_property = [ '-moz-transform', '-ms-transform', '-webkit-transform', '-o-transform'];

$("div.rotate-background").each(function(index, element){
   var angle = -((5-(index/2)) * Math.PI) / 180 ;
   var el = $(element);

   for(var i in tranform_property){
     el.css(tranform_property[i], "matrix(" + Math.cos(angle) + "," +
                  Math.sin(angle) + "," +
                  -Math.sin(angle) + "," +
                  Math.cos(angle) + ", " +
                  (-20 + index*2 ) + ", 1)");

     angle = angle * -1;
     el.find(":first-child").css(tranform_property[i], "matrix(" + Math.cos(angle) + "," +
                  Math.sin(angle) + "," +
                  -Math.sin(angle) + "," +
                  Math.cos(angle) + ", " +
                  (15 - index *4) + ", 1)");
  }
});

我只在 firefox 和 google-chrome 上测试过它。我提供一个jsfiddle example .

编辑:

Here它可能看起来像给定图像的示例。

我给你documentation如果你想调整矩形位置，这对我有帮助