1

傾斜した要素を持つことを意図したアコーディオンを作成しています。アコーディオン機能は動作していますが、傾斜した効果を作成するのに苦労しています。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");
});

私がやろうとしているのは、赤い斜線の後にあるすべてをマスクすることです。これまでに試した「クリップ」

4

1 に答える 1

3

画像の親をスキューしてから、画像のスキューを解除します（反対の角度でスキューします）。何かのようなもの

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

注：

于 2013-01-11T13:46:00.693 に答える