CSS3歪斜只有右上角

我试图制作一个网站，其中部分转换为css3 transform: skewY(-4deg)。关于最后一个元素，我遇到了一个问题，如果我歪斜元素，我在底部有一个空白区域。请给出一些建议来解决它。试图this但它不工作 CSS3歪斜只有右上角

HTML：

<section id="connect-us"> 

     <div class="content-wrapper"> 
      <h1>Подключиться очень просто!</h1> 
      <p>Укажите вашу почту и наш менеджер свяжется с вами в течении дня,а на следующий день ваше заведение будет подключено!</p> 

      <form action="#"> 
       <input type="text" name="email" placeholder="Ваша почта"> 
       <button class="button button--dark-red" type="submit">Отправить</button> 
      </form> 

      <div class="social-belt"> 
       <a href="#" class="icon-facebook-with-circle"></a> 
       <a href="#" class="icon-twitter-with-circle"></a> 
       <a href="#" class="icon-linkedin-with-circle"></a> 
      </div> 

      <footer> 
       <div class="copyright"> 
        <span><span class="firm-name">Mimicra 2015&trade;</span> Сделано в <a href="http://cpdbbk.com">cpdbbk.com</a></span> 
       </div> 
      </footer> 
     </div> 
    </section> 
</div>

SASS：

#connect-us 
    padding: 80px 0 
    background-color: $darkviolet2 
    text-align: center 
    position: relative 
    width: 100% 
    transform: skewY(-4deg) 

.content-wrapper 
    +transform(skew(0deg, 4deg))

来源

2015-11-24 vladja

基于HTML代码，你可以做这样的：

CSS

#connect-us { 
    padding: 80px 0; 
    background-color: blue; 
    text-align: center; 
    position: relative; 
    width: 100%; 
    overflow:hidden; 
    z-index: 1; 
} 

#connect-us:after { 
    width: 100%; 
    content: ""; 
    display: block; 
    height: 100%; 
    position: absolute; 
    top: 10%; 
    -webkit-transform: skewY(-4deg); 
    -moz-transform: skewY(-4deg); 
    -ms-transform: skewY(-4deg); 
    -o-transform: skewY(-4deg); 
    transform: skewY(-4deg); 
    background-color: red; 
    z-index: 2; 
} 

.content-wrapper { 
    position: relative; 
    z-index: 3; 
}

这里有一个的jsfiddle，显示出它的外观：

http://jsfiddle.net/3kauL03j/3/

来源

2015-11-24 22:49:54 Timon

谢谢。它不适合我，我不知道为什么，但我认为你的答案会对另一个人有帮助。我自己也找到了解决方案，这对我很有帮助。 – vladja

解决方案基于负利润率，Z指数和填充

#connect-us 
    padding: 380px 0 80px 
    margin-top: -300px 
    background-color: $darkviolet2 
    text-align: center 
    position: relative 
    +size(100%) 
    z-index: 1

代码光紫色

先前块

#section-id 
    padding: 80px 0 150px 
    background: url(../img/bg_packages.png) no-repeat center center 
    background-size: cover 
    text-align: center 
    position: relative 
    z-index: 10 
    transform: skewY(-4deg)

来源

2015-11-24 23:28:22 vladja

CSS3歪斜只有右上角

回答

相关问题