Question

请建议我如何填补我的偏斜div与其他非偏斜div之间的差距。

这是我的CSS：

body {margin: 0px;padding: 0px;}
.div1 { background: yellow;height: 577px;float:left;width:100%;transform: skew(0deg, -10deg) translateY(-120px);overflow:hidden;}
.div1-container {transform: skew(0deg, 10deg);float:left;width:100%}
img{width:100%; display:block;}
.aaa{float:left; width:100%; background:#f2f2f2; padding:50px 0;}
.container{width:500px; margin:0 auto;}

和HTML

<div class="div1">
<div class="div1-container"> <img src="http://www.gensofts.info/projects/nyc/site/wp-content/uploads/2017/10/shutterstock_442357276-1.jpg" /> </div>
</div>
<div class="aaa">
<div class="container">
    <p>This is new para.</p>
</div>

jsfiddle

Answer 1

＆＃13;

body {margin: 0px;padding: 0px;}
.div1 { background: yellow;height: 577px;float:left;width:100%;transform: skew(0deg, -10deg) translateY(-120px);overflow:hidden;}
.div1-container {transform: skew(0deg, 10deg);float:left;width:100%}
img{width:100%; display:block;}

.aaa{width:100%; background:#f2f2f2; padding:50px 0;}
.container{width:500px; margin:0 auto;}

＆＃13;

<div class="div1">
  <div class="div1-container"> <img src="http://www.gensofts.info/projects/nyc/site/wp-content/uploads/2017/10/shutterstock_442357276-1.jpg" /> </div>
</div>
<div class="aaa">
  <div class="container">
      <p>This is new para.</p>
    </div>
</div>

＆＃13;

如何填补skew shpae div和其他计划ractangle div之间的差距

1 个答案: