如何修复具有div倾斜的内容？

Question

我目前正在使用skewX(-18deg)值转换一个<div>元素，问题是当我插入文本时，无法防止文本溢出。

倾斜容器内的元素使用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>

这是我的笔:

新版本-滚动一页 @r0ysy0301 CodePen

- Ave

---

你可能会想要了解这个——使用CSS将内容包裹成不同形状的技巧。http://www.hongkiat.com/blog/css3-content-wrapping/ - skav

这个问题没有跨浏览器兼容的解决方案，更别说什么移动友好和响应式的了。如果使用许多div，可以完成它，但除非为此付出高昂的代价，否则我不会这样做。 - damiano celent

许多内容的<div>都包含文本？你能提供一个演示吗？目前，我不知道如何解决我的问题。我还尝试了@skav的方法，但它只适用于对象几何形状，而不能正确地解决我的问题。 - Ave

要将文本对齐到斜线上，请参见：Align text on slanted line。 - web-tiki

如果您想走“多个div”路线，我认为可以使用JavaScript自动化，但最终结果的标记将非常糟糕。我建议您按照@skav的评论对支持它的浏览器进行跟踪，然后对其他浏览器进行漂亮的降级（垂直拆分而不是对角线）。 - Jonas Grumann

Answer 1

@skav的链接是一个好的方向，但由于某种原因，shape-inside比shape-outside不可靠得多。

所以这就是我是如何解决的：

您可以在描述div中插入一个div，并使用外部形状对其进行样式设置，以匹配右侧倾斜的图像。显然，您会将背景设置为透明，我将其设置为绿色，以便您可以看到其效果。

此外，对于您的图像，使用剪辑路径需要更少的代码行。将文本放在

标签中使其更清晰，添加单词中的­可以使调整后的文本更美观。

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;
}

看这里：

- Salix

---

谢谢。祝你有美好的一天! :) - Ave