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歪斜只有右上角

回答

相關問題