一個角度掩蓋圖像

Question

我在做，是爲了有傾斜元素的手風琴，我已經拿到了手風琴功能的工作，但我在努力創建傾斜的影響，我有一個jsfiddle

，也這裏是我的代碼，

<div id="accordion"> 
    <div class="set" id="first" data-width="261"> 
     <div class="accord"> 
     <img src="http://placekitten.com/872/690" /> 
     </div> 
    </div> 
    <div class="set active" id="second" data-width="106"> 
    <div class="accord"> 
     <img src="http://placekitten.com/872/690" /> 
    </div> 
    </div> 
    <div class="set" id="third" data-width="113"> 
    <div class="accord"> 
     <img src="http://placekitten.com/872/690" /> 
    </div> 
    </div> 
    <div class="set" id="fourth" data-width="71"> 
    <div class="accord"> 
     <img src="http://placekitten.com/872/690" /> 
    </div> 
    </div> 
    <div class="set" id="fifth" data-width="24"> 
    <div class="accord"> 
     <img src="http://placekitten.com/872/690" /> 
    </div> 
    </div> 
    <div class="set" id="sixth" data-width="89"> 
    <div class="accord"> 
     <img src="http://placekitten.com/872/690" /> 
    </div> 
    </div> 
</div> 

*, html { padding:0; margin:0; } 
    #accordion { white-space:nowrap;background:black; width:2000px; height:690px; } 
    .set { white-space:normal; display:inline-block; position:relative; overflow:hidden; } 
    .active { width:872px; } 
    #first { width:261px; } 
    #third { width:113px; } 
    #fourth { width:71px; } 
    #fifth { width:24px; } 
    #sixth { width:89px; } 

    .set:after { 
     width:15px; 
     height:15px; 
     display:block; 
     background:red; 
     position:absolute; 
     top:0px; 
     right:0px; 
     content:""; 
    } 

    .set:before { 
     width:1px; 
     background:red; 
     display:block; 
     position:absolute; 
     height:100%; 
     -webkit-transform:rotate(9deg); 
     content: " "; 
     top:0px; 
     right:68px; 
    } 

$("#accordion .set").click(function() { 
    var active = $(this).parent().find(".active"); 
    active.animate({"width" : active.data('width')}, 1000); 
    active.removeClass("active"); 
    $(this).animate({"width" : 872}, 1000); 
    $(this).addClass("active"); 
}); 

我什麼試着克至做的是屏蔽掉每一個是紅色的斜線後，到目前爲止我試過了，「夾」

Answer 1

使用這個鏈接，手風琴http://jqueryui.com/accordion/我希望這會幫助的。在V

Answer 2

傾斜父圖像，然後解開圖像（傾斜相反的角度）。喜歡的東西

.set { transform: skewX(-10deg); } 
.set img { transform: skewX(10deg); } 

注：

• 確保圖像具有display: block（或inline-block），或者 變換將無法正常工作。
• transform needs -webkit- prefix for WebKit browsers and -ms- prefix for IE9
• 我認爲你可以簡化您的標記 - 我不知道爲什麼你需要的圖像周圍的.accord包裝。