Question

我正在尝试创建一个网站，其中的部分使用css3 transform: skewY(-4deg)进行转换。在最后一个元素我遇到了问题，如果我扭曲元素我底部有一个白色空间。请给出一些建议来解决它。试过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和填充的解决方案

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

浅紫色前一个区块的代码

#include <stdio.h>
#include <math.h>
//#include <conio.h>

double getMin (double xf,double yf,double zf);


int main( void )
{

    double x = 1.0;
    double y = 0.0;
    double z = 1.0;
    double min = 0.0;

    for (int j = 3 ; j >= -2 ; j--)
    {
        x = (sin(pow(j, (1 / 2))) / (j + 1)) * x;
        printf("\nP #1=%lf", x);
    }

    printf( "\n\n" );

    for (int k = 5 ; k <= 9 ; k++)
    {
        y = cos(k / (k - 10)) + y;
        printf("\nS #1 = %lf", y);
    }

    printf( "\n\n" );

    for (int l = 2 ; l <= 8 ; l++)
    {
        z = (log10(l - 4)) * z;
        printf("\nP #2= %lf", z);
    }

    printf( "\n\n" );

    min = getMin(x, y, z);
    printf("\nM = %lf", min);
    getchar();
} // end function: main


double getMin (double xf,double yf,double zf)
{
    if (xf < yf && xf < zf)
    {
        return (xf);
    }
    else if (yf < xf && yf < zf)
    {
        return (yf);
    }
    else return (zf);
} // end function: getMin

CSS3仅在右上角倾斜

2 个答案: