Question

我正在为自己做一些事情，我走进了一个我无法解决的问题。我试图实现一个小的效果，其中有2个具有倾斜边缘的div。但是，他们的父div得到一个滚动条，因为偏斜落在了外面。

HTML

<div class="c-r">
        <div class=" c-c c-r-l-1">

        </div>
        <div class="c-c c-r-r-1">

        </div>
</div>

CSS

.c-r{
display: block;
height: auto;
overflow: auto;
}
.c-c{
    width: 50%;
    height: 300px;
    margin-top: 150px;
    position: relative;
    display: inline-block;
    float: left;
    background: #44bf86;
}

.c-r-l-1:before, .c-r-l-1:after {
    content: '';
    width: 100%;
    height: inherit;
    position: absolute;
    background: inherit;
    z-index: -1;
    transition: ease all .5s;
    -webkit-transform:skewY(5deg) ;
    -moz-transform: skewY(5deg);
    -ms-transform: skewY(5deg);
    -o-transform:skewY(5deg) ;
    transform:skewY(5deg) ;
}
.c-r-l-1:before {
    top: 0;
    z-index: 12;
    transform-origin: right top;
}
.c-r-l-1:after {
    bottom: 0;
    z-index: 12;
    transform-origin: left bottom;
}
.c-r-r-1:before, .c-r-r-1:after {
    content: '';
    width: 100%;
    height: inherit;
    position: absolute;
    background: inherit;
    z-index: -1;
    transition: ease all .5s;
}
.c-r-r-1:before {
    top: 0;
    transform-origin: left top;
    transform: skewY(-5deg);
}
.c-r-r-1:after {
    bottom: 0;
    transform-origin: right bottom;
    transform: skewY(-5deg);
}
@media screen and (max-width: 720px){

    .c-r{
        display: block;
        overflow: auto;
    }
    .c-c{
        width: 100%;
    }
}

我不确定我能给你的其他信息是什么。我希望你们都能帮助我，并感谢你们抽出时间。

〜问候

Answer 1

我找到了解决问题的方法。

我所要做的就是添加：

padding-top: 5%;
padding-bottom: 5%;

它必须是5的原因是因为我的歪斜是5度！

到我的外部div。现在一切正常。谢谢大家的时间！

父div的自动高度，其中子div具有倾斜的边缘

1 个答案: