Обрезка изображения без торчания

Question

Я успешно достигаю своей цели, но при этом дивы падают за пределы нормальной области и требуют прокрутки. Как я могу достичь такого рода маскировки, сохраняя все, что было горизонтально. Я попытался изменить положение различных элементов и, похоже, не мог достичь этой цели. * Обратите внимание, что цвета доступны только для справки, в конце красные/синие/зеленые divs будут белыми.

https://jsfiddle.net/xevsz81c/

#leftDivider { 
 
\t \t width: 50%; 
 
\t \t height: 50px; 
 
\t \t background:red; 
 
\t \t float: left; 
 
\t \t position: absolute; 
 
\t \t left: -50px; 
 
\t } 
 
\t #leftDivider div{ 
 
\t \t bottom: 0px; 
 
\t \t height: 0px; 
 
\t \t border-style: solid; 
 
\t \t border-width: 50px 0 0 60px; 
 
\t \t border-color: transparent transparent transparent green; 
 
\t \t float: left; 
 
\t \t position: relative; 
 
\t \t left: 100%; 
 
\t } 
 
\t #rightDivider { 
 
\t \t width: 50%; 
 
\t \t height: 50px; 
 
\t \t background: blue; 
 
\t \t float: right; 
 
\t \t position: absolute; 
 
\t \t right: -50px; 
 
\t } 
 
\t #rightDivider div{ 
 
\t \t bottom: 0px; 
 
\t \t height: 0px; 
 
\t \t border-style: solid; 
 
\t \t border-width: 0 0 50px 60px; 
 
\t \t border-color: transparent transparent green transparent; 
 
\t \t float: right; 
 
\t \t position: relative; 
 
\t \t right: 100%; 
 
\t } 
 
\t .divider { 
 
\t \t position: absolute; 
 
\t \t bottom: 50px; 
 
\t \t right: 0; 
 
\t \t left: 0; 
 
\t } 
 
    .row {background: orange; position: relative; height: 300px; padding: 0; margin: 0;} 
 
    html, body {margin: 0; padding: 0;}

<div class="row"> 
 
    This div has a background image 
 
\t <div class="divider"><div id="leftDivider"><div></div></div></div> 
 
\t <div class="divider"><div id="rightDivider"><div></div></div></div> 
 
</div>

Answer 1

Я трудное время воссоздавать вопрос в вашей скрипке, может быть отсутствие изображения внутри оранжевых дел. Но попробуйте следующее:

Вам необходимо использовать свойство overflow: hidden.

Делая это, вы скрываете лишнее и отключите прокрутку, которая звучит так, как вам нужно и которая испытывает.

См. explanation here, а также его использование.