javascript - 如何修复 div 倾斜的内容？

Question

我目前正在改造 <div>使用 skewX(-18deg) 的元素值，问题是当我向其中插入文本时，我无法阻止它溢出。

使用 skewX(18deg) 将倾斜容器内的元素转换回正常状态.

最终结果应该是这样的:

$(document).ready(function() {

  var curPage = 1;
  var numOfPages = $(".skw-page").length;
  var animTime = 1000;
  var scrolling = false;
  var pgPrefix = ".skw-page-";

  function pagination() {
    scrolling = true;

    $(pgPrefix + curPage).removeClass("inactive").addClass("active");
    $(pgPrefix + (curPage - 1)).addClass("inactive");
    $(pgPrefix + (curPage + 1)).removeClass("active");

    setTimeout(function() {
      scrolling = false;
    }, animTime);
  };

  function navigateUp() {
    if (curPage === 1) return;
    curPage--;
    pagination();
  };

  function navigateDown() {
    if (curPage === numOfPages) return;
    curPage++;
    pagination();
  };

  $(document).on("mousewheel DOMMouseScroll", function(e) {
    if (scrolling) return;
    if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
      navigateUp();
    } else {
      navigateDown();
    }
  });

  $(document).on("keydown", function(e) {
    if (scrolling) return;
    if (e.which === 38) {
      navigateUp();
    } else if (e.which === 40) {
      navigateDown();
    }
  });

});

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  background: #15181A;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
.skw-pages {
  overflow: hidden;
  position: relative;
  height: 100vh;
}
.skw-page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.skw-page__half {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100vh;
  -webkit-transition: -webkit-transform 1s;
  transition: -webkit-transform 1s;
  transition: transform 1s;
  transition: transform 1s, -webkit-transform 1s;
}
.skw-page__half--left {
  left: 0;
  -webkit-transform: translate3d(-32.4vh, 100%, 0);
  transform: translate3d(-32.4vh, 100%, 0);
}
.skw-page__half--right {
  left: 50%;
  -webkit-transform: translate3d(32.4vh, -100%, 0);
  transform: translate3d(32.4vh, -100%, 0);
}
.skw-page__half--30 {
  width: 30%;
}
.skw-page__half--70 {
  width: 70%;
}
.skw-page.active .skw-page__half {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.skw-page__skewed {
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 140%;
  height: 100%;
  -webkit-transform: skewX(-18deg);
  transform: skewX(-18deg);
  background: #000;
}
.skw-page__half--left .skw-page__skewed {
  left: -20%;
}
.skw-page__half--right .skw-page__skewed {
  right: -20%;
}
.skw-page__content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  text-align: left;
  -webkit-flex-flow: column wrap;
  -ms-flex-flow: column wrap;
  flex-flow: column wrap;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 0 30%;
  color: #fff;
  -webkit-transform: skewX(18deg);
  transform: skewX(18deg);
  -webkit-transition: opacity 1s, -webkit-transform 1s;
  transition: opacity 1s, -webkit-transform 1s;
  transition: transform 1s, opacity 1s;
  transition: transform 1s, opacity 1s, -webkit-transform 1s;
  background-size: cover;
}
.skw-page__half--left .skw-page__content {
  padding-left: 3%;
  padding-right: 2%;
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
}
.skw-page__half--right .skw-page__content {
  padding-left: 30%;
  padding-right: 30%;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
}
.skw-page.inactive .skw-page__content {
  opacity: 0.5;
  -webkit-transform: skewX(18deg) scale(0.95);
  transform: skewX(18deg) scale(0.95);
}
.skw-page__heading {
  margin-bottom: 15px;
  text-transform: uppercase;
  font-size: 25px;
}
.skw-page__description {
  font-size: 14px;
}
.skw-page__link {
  color: #FFA0A0;
}
.skw-page-1 .skw-page__half--left .skw-page__content {
  background: #292929;
}
.skw-page-1 .skw-page__half--right .skw-page__content {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/slider-2.jpg");
}
.skw-page-2 .skw-page__half--left .skw-page__content {
  background: #292929;
}
.skw-page-2 .skw-page__half--right .skw-page__content {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/sections-3.jpg");
}
.skw-page-3 .skw-page__half--left .skw-page__content {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/img-test.jpg");
}
.skw-page-3 .skw-page__half--right .skw-page__content {
  background: #292929;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="skw-pages">

  <div class="skw-page skw-page-1 active">
    <div class="skw-page__half skw-page__half--left skw-page__half--30">
      <div class="skw-page__skewed">
        <div class="skw-page__content">
          <h2 class="skw-page__heading">Page 1</h2>
          <p class="skw-page__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus harum qui, placeat fugit delectus maxime voluptatibus perspiciatis, quia sit itaque! Ut eum dicta quam minus earum beatae at iure perspiciatis. Lorem ipsum dolor sit amet, consectetur
            adipisicing elit. Ex, ut. Fugit minima consequatur voluptatem commodi culpa, adipisci laborum qui vitae. Voluptas voluptates nihil ratione eaque labore perspiciatis, animi placeat eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing
            elit. Quibusdam libero, cupiditate asperiores tempora quos porro inventore? Praesentium aperiam deleniti nam a aliquid sequi ea perspiciatis error recusandae enim, dolorem quae.</p>
        </div>
      </div>
    </div>
    <div class="skw-page__half skw-page__half--right skw-page__half--70">
      <div class="skw-page__skewed">
        <div class="skw-page__content"></div>
      </div>
    </div>
  </div>

  <div class="skw-page skw-page-2">
    <div class="skw-page__half skw-page__half--left skw-page__half--30">
      <div class="skw-page__skewed">
        <div class="skw-page__content">
          <h2 class="skw-page__heading">Page 2</h2>
          <p class="skw-page__description">Ok, ok, just one more scroll!</p>
        </div>
      </div>
    </div>
    <div class="skw-page__half skw-page__half--right skw-page__half--70">
      <div class="skw-page__skewed">
        <div class="skw-page__content"></div>
      </div>
    </div>
  </div>
  <div class="skw-page skw-page-3">
    <div class="skw-page__half skw-page__half--left skw-page__half--30">
      <div class="skw-page__skewed">
        <div class="skw-page__content"></div>
      </div>
    </div>
    <div class="skw-page__half skw-page__half--right skw-page__half--70">
      <div class="skw-page__skewed">
        <div class="skw-page__content">
          <h2 class="skw-page__heading">Epic finale</h2>
          <p class="skw-page__description">
            Feel free to check
            <a class="skw-page__link" href="http://codepen.io/suez/pens/public/" target="_blank">my other pens</a> and follow me on
            <a class="skw-page__link" href="https://twitter.com/NikolayTalanov" target="_blank">Twitter</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

这是我的笔:

看笔 New version - Scroll one page通过文禄 ( @r0ysy0301 ) 在 CodePen .

Answer 1

@skav 链接是一个很好的方向，但出于某种原因，shape-in​​side 不如 shape-outside 可靠。

所以这是我解决这个问题的方法:

您可以在您的描述 div 中插入一个 div 并使用外形设计它以匹配右侧倾斜的图像。显然，你会把背景设为透明，我把它设为绿色，这样你就可以看到它的效果。

此外，对于您的图像，使用剪辑路径将需要更少的代码行。将您的文本放在 p 标签中使其更清晰，并添加文字使合理的文本更漂亮。

对于 html:

<div class="skw-page__content">
          <div class="triangle"></div>
          <h2 class="skw-page__heading">Page 1</h2>
          <div class="skw-page__description">
            <p>Lorem ipsum dolor sit amet, con&shy;sect&shy;etur adi&shy;pisi&shy;cing elit. Accu&shy;sa&shy;mus ha&shy;rum qui, pla&shy;ceat fugit de&shy;lec&shy;tus ma&shy;xime volupta&shy;tibus perspi&shy;ciatis, quia sit it&shy;aque!</p>
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/img-test.jpg" alt="random nice picture of a montain reflecting ine a blue lake"/>
            <p>Qui&shy;bus&shy;dam lib&shy;ero, cupi&shy;di&shy;ta&shy;te aspe&shy;rio&shy;res tem&shy;pora quos porro in&shy;ven&shy;tore? Prae&shy;sen&shy;tium ape&shy;riam dele&shy;ni&shy;ti nam a a&shy;li&shy;quid sequi ea perspi&shy;ciatis error recu&shy;sandae enim, do&shy;lorem quae.</p>
          </div> 

对于 CSS:

  &__description {
    font-size: 14px;
    width: 100%;
    hyphens: auto;
    text-align: justify;
    padding: 0;
}
img{
      min-width: 0px;
      max-width: 75%;
      min-height: 0px;
      margin: 2% 0;
      clip-path: polygon(0% 0%, 100% 0%, 78% 100%, 0% 100%);
  }

.triangle {
    width: 300px;
    height: 100%;
    background-color: transparent;
    shape-margin: 0 0 0 2%;
    clip-path: polygon(98% 0%, 100% 0%, 100% 100%, 50% 100%);
    shape-outside: polygon(95% 0%, 100% 0%, 100% 100%, 50% 100%);
    background: green;
    float: right;
    right: 0;
}

瞧 :)