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 needs -webkit- prefix for WebKit browsers and -ms- prefix for IE9

我认为你可以简化你的标记 - 我不确定为什么你需要图像周围的.accord包装。

Answer 2

将这个链接用于手风琴http://jqueryui.com/accordion/我希望这对你有帮助

在一个角度上掩盖图像

2 个答案: