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

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 具有倾斜的边缘

Auto height of parent div where child divs have skewed edges

html

css

skew