如何解决与div歪斜的内容？ [英] How to fix content with div skew?
本文介绍了如何解决与div歪斜的内容？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 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）; $（pgPr efix +（curPage - 1））。addClass（inactive）; $（pgPrefix +（curPage + 1））。removeClass（active）; setTimeout（function（）{scrolling = false;}，animTime）; }; function navigateUp（）{if（curPage === 1）return; curPage--;分页（）; };函数navigateDown（）{if（curPage === numOfPages）return; curPage ++;分页（）; }; $（文件）。在（ 滚轮DOMMouseScroll，函数（E）{如果（滚动）返回;如果（e.originalEvent.wheelDelta大于0 || e.originalEvent.detail℃，）{navigateUp（）;} else {navigateDown（）;}}）; $（document）.on（keydown，function（e）{if（scrolling）return; if（e.which === 38）{navigateUp（）;} else if（e.which === 40）{ navigateDown（）;}}）;}）;
* ，*：before，*：{box-sizing：border-box;保证金：0; padding：0;} body {background：＃15181A; font-family：Open Sans，Helvetica，Arial，sans-serif;}。skw-pages {overflow：hidden;位置：相对; height：100vh;}。skw-page {position：absolute;左：0; top：0; width：100％;}。skw-page__half {position：absolute; top：0;宽度：50％;身高：100vh; -webkit-transition：-webkit-transform 1s;过渡：-webkit-transform 1s;过渡：变换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;位置：绝对; top：0;宽度：140％;身高：100％; -webkit-transform：skewX（-18deg）; transform：skewX（-18deg）;背景：＃000;} SKW-page__half - 左.skw-page__skewed {左：-20％;} SKW-page__half - 右.skw-page__skewed {右：。-20％;} SKW-page__content {显示：-webkit-box;显示：-webkit-flex;显示：-ms-flexbox;显示：flex; text-align：left; -webkit-flex-flow：列换行; -ms-flex-flow：列换行; flex-flow：列式包装;位置：绝对;左：0; top：0;宽度：100％;身高：100％;填充：0 30％;颜色：#fff; -webkit-transform：skewX（18deg）; transform：skewX（18deg）; -webkit-transition：不透明度1s，-webkit-transform 1s;过渡：不透明度1s，-webkit-transform 1s;过渡：变换1s，不透明度1s;转换：变换1s，不透明度1s，-webkit-transform 1s; background-size：cover;}。skw-page__half - left .skw-page__content {padding-left：3％;填充权：2％; -webkit-transform-origin：100％0; transform-origin：100％0;}。skw-page__half - right .skw-page__content {padding-left：30％;填充权：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;文字转换：大写; 。字体大小：25像素;} SKW-page__description {字体大小：14px的;} SKW-page__link {颜色：＃FFA0A0;} SKW-页面-1 .skw-page__half - 左.skw-page__content {背景： ＃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>页面1< / h2> < p class =skw-page__description> Lorem ipsum dolor sit amet，consectetur adipisicing elit。 Accusamus harum qui，安抚itaque！在iure perspiciatis上，你可以听到你的答案。 Lorem ipsum dolor坐amet，consectetur adipisicing elit。例如， Fugit minima consequatur voluptatem commodi culpa，adipisci laborum qui vitae。 Voluptas voluptates nihil的理由是eaque labore perspiciatis，animi placeat eligendi。 Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Quibusdam libero，cupiditate asperiores临时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>第2页< / h2> < p class =skw-page__description>好的，好的，只需再滚动一次！< / 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>随意检查< a class =skw-page__linkhref =http://codepen.io/suez/pens/public/target =_ blank>我的其他笔< / a>并关注< a class =skw-page__linkhref =https://twitter.com/NikolayTalanovtarget =_ blank> Twitter< / a> < / p为H. < / DIV> < / DIV> < / DIV> < / div>< / div>
：
查看钢笔新版本 - 滚动一页 a> byVănLộc（ @ r0ysy0301 ） CodePen 。
解决方案
@skav链接是一个很好的方向，但由于某种原因，shape-inside比shape-outside要可靠得多。
你可以在你的描述div中插入一个div，并用outershape对其进行设置，以匹配右侧的倾斜图像。很明显，你会把背景变成透明的，我把它变成绿色，这样你就可以看到它的效果。
另外，对于你的图像，使用剪辑路径会需要更少的代码行。将您的文本放在p标签中使得它更加清晰并且增添了羞涩;在文字中使得正确的文本更漂亮。
for html：
< div class =skw-page__content>
< div class =triangle>< / div>
< h2 class =skw-page__heading>第1页< / h2>
< div class =skw-page__description>
< p> Lorem ipsum dolor sit amet，con& shy; sect& shy; etur adi& shy; pisi& shy; cing elit。累加器和放大器;害羞; SA&安培;害羞;亩公顷和放大器;害羞;朗姆酒魁，解放军和放大器;害羞;西特福吉特DE&放大器;害羞; LEC和放大器;害羞;土族MA&放大器;害羞;酮肟volupta和放大器;害羞; tibus perspi和放大器;害羞; ciatis，quia坐资讯科技及电讯;害羞; aque<！/ p为H.
将p为H.魁&安培;害羞;总线&安培;害羞;坝LIB&安培;害羞; ERO，CUPI&安培;害羞;二&安培;害羞; TA&安培;害羞; TE ASPE&安培;害羞;里奥&安培;害羞; RES TEM&安培;害羞;波拉quos porro in& shy; ven& shy; tore？ Prae&安培;害羞;仙&安培;害羞;氚猿&安培;害羞; RIAM DELE&安培;害羞; NI&安培;害羞; TI南一个A和害羞;李&安培;害羞;嚼食亮片EA perspi&安培;害羞; ciatis错误recu&安培;害羞; sandae enim，做&安培;害羞; lorem quae。< / p>
< / div>
代表css：
& __ description {
font-size：14px;
宽度：100％;
连字符：auto;
text-align：justify;
padding：0;
}
img {
min-width：0px;
最大宽度：75％;
min-height：0px;
保证金：2％0;
clip-path：多边形（0％0％，100％0％，78％100％，0％100％）;
}
.triangle {
width：300px;
身高：100％;
background-color：transparent;
shape-margin：0 0 0 2％;
clip-path：多边形（98％0％，100％0％，100％100％，50％100％）;
shape-outside：多边形（95％0％，100％0％，100％100％，50％100％）;
背景：绿色;
float：right;
right：0;
}
语音：）
I am currently transforming a <div> element using the skewX(-18deg) value, the problem is when I insert text into it I cannot prevent it from overflowing.
The element inside the skewed container is transformed back to normal using skewX(18deg).
The final result should look like this:
$(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>
Here my pen:
See the Pen New version - Scroll one page by Văn Lộc (@r0ysy0301) on CodePen. 解决方案
@skav link was a good direction, but for some reason shape-inside is much less reliable than shape-outside.
So here's how I solved this:
you can insert a div in your description div and style it with an outershape to match the skewed image on the right. Obviously, you'd put the background to transparent, i made it green so you could see it's effect.
Also, for your image, using a clip-path would require less lines of code. Putting your text in p tags made it more clear and adding in words make the justified text prettier.
for 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­sect­etur adi­pisi­cing elit. Accu­sa­mus ha­rum qui, pla­ceat fugit de­lec­tus ma­xime volupta­tibus perspi­ciatis, quia sit it­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­bus­dam lib­ero, cupi­di­ta­te aspe­rio­res tem­pora quos porro in­ven­tore? Prae­sen­tium ape­riam dele­ni­ti nam a a­li­quid sequi ea perspi­ciatis error recu­sandae enim, do­lorem quae.</p>
</div>
for 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;
}
Voilà :)
这篇关于如何解决与div歪斜的内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
