CSS3 仅倾斜右上角

Question

我正在尝试创建一个网站，其中的部分使用 css3 transform: skewY(-4deg) 进行转换。在最后一个元素上我遇到了问题，如果我倾斜元素，底部会有一个白色的 space。请提供一些建议来修复它。试过 this 但没有用

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))

Answer 1

根据您的 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/

Answer 2

基于负边距、z-index 和 padding 的解决方案

#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)

CSS3 仅倾斜右上角

CSS3 skew only top right corner

html

css

skew