父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的邊緣傾斜

回答

相關問題