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

我正在为自己做一些事情，并且我走进了一个问题，我简直无法解决。我试图在有2个边缘倾斜的div的情况下实现小的效果。然而，他们的父div得到一个滚动条，因为偏斜落在外面。父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%; 
    } 
}

我真的不知道还有什么其他的信息，我可以给你比这个。我希望你们都能帮助我，并感谢你花时间。

〜问候

来源

2017-06-04 Ellisan

所以，你希望他们没有得到滚动条外出？ – LGSon

我只是想要显示每个符号，包括没有滚动条的倾斜边缘。没有溢出：隐藏 – Ellisan

但是，在更宽的屏幕上工作，bur更窄，你的媒体查询改变他们阻止堆栈垂直。那么小屏幕上会发生什么？ – LGSon

我找到了修复我的问题。

所有我要做的就是添加：

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

为什么它必须是5是因为我的歪斜是怎么回事5度的原因！

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

来源

2017-06-04 21:19:44 Ellisan

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

回答

相关问题