CSS3 仅在右上角倾斜

Question

我正在尝试制作一个网站，其中的部分使用 css3 进行转换transform: skewY(-4deg)。在最后一个元素上，我遇到了问题，如果我倾斜元素，我会在底部有一个空白区域。请给一些建议来解决它。试过这个，但它不起作用

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>

萨斯：

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