Question

有人可以解释这个site如何在调整大小时实现skeyY变换对象的完美缩放？

我可以使用下面的代码来实现静态效果，但是在调整大小时我无法保持完美的垂直对齐。我尝试使用媒体查询，但结果不可接受。

＆＃13;

.negociar {
    position: relative;
    height: 100vh;
}

.skew-heading {
    
    background: #0A996F;
    color: #fff;
    position: relative;
    z-index: 1;
    padding-top: 11rem;
    padding-bottom: 0px;
}

    .skew-heading:after {
        background-color: white;
        content: '';
        display: block;
        position: relative;
        top: 100px;
        left: 0;
        width: 100%;
        height: 400px;
        -moz-transform: skewY(-9deg);
        -ms-transform: skewY(-9deg);
        -webkit-transform: skewY(-9deg);
        -webkit-transform-origin: 75% 0;
        -o-transform: skewY(-9deg);
        transform: skewY(-9deg);
        transform-origin: 75% 0;
        z-index: -1;
    }

＆＃13;

Answer 1

这将解决问题https://codepen.io/anon/pen/VbpYqX

<div class="container">
  <div class="content">
  </div>
</div>

.container {
    height: 100vh;
    background: linear-gradient(to left, #56CCF2, #2F80ED) !important;
    position: relative;
}

.container:after {
    content: '';
    height: 400px;
    width: 100%;
    display: block;
    position: relative;
    left: 0;
    top: 0;
    background: white;
    transform: skewY(-9deg);
    transform-origin: top;
    -webkit-transform: skewY(-9deg);
    -webkit-transform-origin: 0 0;
}

.content {
  height: 100%;
}

CSS 3转换skewY并调整大小

1 个答案: