html - 以某个角度遮盖图像

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

倾斜图像的父级，然后取消倾斜（倾斜相反的角度）图像。就像是

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

备注：

• 确保图像有display: block（或inline-block），否则转换将不起作用。
• transform-webkit-WebKit 浏览器需要前缀-ms- ，IE9需要前缀
• 我认为你可以简化你的标记——我不确定你为什么需要.accord图像的包装器。