Как скрыть переполненный элемент, но только сверху?

Question

Я только хочу скрыть элементы, которые переполнены сверху. В моем документе синий - это фон img, а ребенок перекошен div.
fiddle

<div class="parent"> 
    <div class=child> 

    </div> 
</div> 

.parent { 
    margin: 50px; 
    height: 200px; 
    width: 200px; 
    background: red; 
} 
.child { 
    height: 200px; 
    width: 200px; 
    background: blue; 
     transform: skewY(20deg); 
    -webkit-transform: skewY(20deg); 
    -moz-transform: skewY(20deg); 
    -o-transform: skewY(20deg); 
} 

Answer 1

нужно добавить еще один родитель с overflow: hidden:

.ovh-parent { 
 
    overflow: hidden; 
 
} 
 
.parent { 
 
    margin: 50px; 
 
    height: 200px; 
 
    width: 200px; 
 
    background: red; 
 
    margin-top: 0; 
 
} 
 
.child { 
 
    height: 200px; 
 
    width: 200px; 
 
    background: blue; 
 
    transform: skewY(20deg); 
 
    -webkit-transform: skewY(20deg); 
 
    -moz-transform: skewY(20deg); 
 
    -o-transform: skewY(20deg); 
 
}

<div class="ovh-parent"> 
 
    <div class="parent"> 
 
    <div class=child> 
 

 
    </div> 
 
    </div> 
 
</div>

ли эта работа для вас? Смотрите ниже предварительный просмотр ...

Просмотр

Answer 2

Вам нужно будет добавить еще один DIV вне родителя, который помог бы с пряча переполнения.

.overflow{ 
 
    margin: 20px; 
 
    overflow: hidden; 
 
    height: 300px; 
 
    width: 200px; 
 
    position: relative; 
 
} 
 
.parent { 
 
    height: 200px; 
 
    width: 200px; 
 
    background: red; 
 
    position: absolute; 
 
    top: 0; 
 
} 
 
.child { 
 
    height: 200px; 
 
    width: 200px; 
 
    background: blue; 
 
    transform: skewY(20deg); 
 
    -webkit-transform: skewY(20deg); 
 
    -moz-transform: skewY(20deg); 
 
    -o-transform: skewY(20deg); 
 
}

<div class="overflow"> 
 
    <div class="parent"> 
 
    <div class=child> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

Вам не нужно добавить еще один предок, если вы используете этот трюк:

• Добавить overflow: hidden скрыть от переполнения
• Увеличьте высоту, чтобы избежать отсечения переполнения внизу
• Добавьте отрицательный запас, чтобы предотвратить предыдущий шаг от аффекта ng следующее содержание
• Используйте фоновое изображение вместо цвета фона. Например, используйте градиент.
• Используйте background-size чтобы установить размер этого фона. Не повторяйте фон.

.parent { 
 
    overflow: hidden; 
 
    margin: 50px; 
 
    height: 300px; 
 
    margin-bottom: -100px; 
 
    width: 200px; 
 
    background: linear-gradient(red, red) no-repeat; 
 
    background-size: auto 200px; 
 
    margin-top: 0; 
 
} 
 
.child { 
 
    height: 200px; 
 
    width: 200px; 
 
    background: blue; 
 
    transform: skewY(20deg); 
 
    -webkit-transform: skewY(20deg); 
 
    -moz-transform: skewY(20deg); 
 
    -o-transform: skewY(20deg); 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
</div> 
 
Lorem ipsum