那些遇到过的问题

如何使用div skew修复内容？

van*_*loc 6 html javascript css jquery css3

我正在<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();
    }
  });

});
Run Code Online (Sandbox Code Playgroud) 
*,
*: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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

我的笔在这里:

请参阅Pen 新版本 -在CodePen上用VănLộc(@ r0ysy0301)滚动一页.

Sal*_*lix 2

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

\n\n

所以这就是我解决这个问题的方法：在此输入图像描述

\n\n

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

\n\n

另外，对于您的图像，使用剪辑路径将需要更少的代码行。\n将文本放入 p 标签中可以使其更加清晰，添加单词可以使对齐的文本更加美观。

\n\n

对于 HTML：

\n\n
<div class="skw-page__content">\n          <div class="triangle"></div>\n          <h2 class="skw-page__heading">Page 1</h2>\n          <div class="skw-page__description">\n            <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>\n            <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"/>\n            <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>\n          </div> \n
Run Code Online (Sandbox Code Playgroud)\n\n

对于CSS：

\n\n
  &__description {\n    font-size: 14px;\n    width: 100%;\n    hyphens: auto;\n    text-align: justify;\n    padding: 0;\n}\nimg{\n      min-width: 0px;\n      max-width: 75%;\n      min-height: 0px;\n      margin: 2% 0;\n      clip-path: polygon(0% 0%, 100% 0%, 78% 100%, 0% 100%);\n  }\n\n.triangle {\n    width: 300px;\n    height: 100%;\n    background-color: transparent;\n    shape-margin: 0 0 0 2%;\n    clip-path: polygon(98% 0%, 100% 0%, 100% 100%, 50% 100%);\n    shape-outside: polygon(95% 0%, 100% 0%, 100% 100%, 50% 100%);\n    background: green;\n    float: right;\n    right: 0;\n}\n
Run Code Online (Sandbox Code Playgroud)\n\n

瞧\xc3\xa0:)

\n

归档时间：

查看次数：

856 次

最近记录：

9 年，5 月 前
在斜线上对齐文本 17
更多相关链接
相关归档
2列div布局:右列有固定宽度,左侧流体 155
你能用CSS定位<br />吗？ 150
如何将html单选按钮垂直对齐到它的标签？ 83
webkit中的意外标记ILLEGAL 61
评论javascript对象和方法的首选方法是什么 51
用户输入数字时jQuery可以添加逗号吗？ 32
带显示块的SPAN 18
如何告诉Web浏览器关于Atom Feeds 17
为什么带有`overflow:hidden`的`inline-block`元素的基线设置为其下边距？ 16
CSS中的波形边框 12
难疑归档
Docker与虚拟机有何不同？ 3523
按字符串属性值对对象数组进行排序 2535
如何检查字符串是否包含Bash中的子字符串 2332
Bower和npm有什么区别？ 1723
在PostgreSQL中显示表格 1703
如何将元素移动到另一个元素？ 1611
如何显示JavaScript对象？ 1520
如何使用INER JOIN与SQL Server删除？ 1181
检查是否使用jQuery选中了复选框 1122
如何撤消git reset --hard HEAD~1？ 1083