Search code examples
htmlcssskew

CSS3 skew only top right corner

I'm trying to make a website where sections are transformed with css3 transform: skewY(-4deg). On the last element I got a problem, if I skew element I have a white space on the bottom. Please, give some advices to fix it. Tried this but it doesn't work enter image description here

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

  • Based on your HTML code, you could do it like this:

    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;
}

    Here's a jsFiddle, showing how it looks:

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