Crop section of image without sticking out - html

Question

I am successfully achieving my goal but in so doing the divs stick outside the normal area and require scrolling. How can I achieve this sort of masking while keeping everything contained horizontally. I've tried altering the position of various elements and can't seem to achieve this goal. *Note the colors are only there for reference, in the end the red/blue/green divs would be white.
https://jsfiddle.net/xevsz81c/
#leftDivider {
width: 50%;
height: 50px;
background:red;
float: left;
position: absolute;
left: -50px;
}
#leftDivider div{
bottom: 0px;
height: 0px;
border-style: solid;
border-width: 50px 0 0 60px;
border-color: transparent transparent transparent green;
float: left;
position: relative;
left: 100%;
}
#rightDivider {
width: 50%;
height: 50px;
background: blue;
float: right;
position: absolute;
right: -50px;
}
#rightDivider div{
bottom: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 50px 60px;
border-color: transparent transparent green transparent;
float: right;
position: relative;
right: 100%;
}
.divider {
position: absolute;
bottom: 50px;
right: 0;
left: 0;
}
.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
<div class="divider"><div id="leftDivider"><div></div></div></div>
<div class="divider"><div id="rightDivider"><div></div></div></div>
</div>

Answer 1

I am having a difficult time recreating the issue in your fiddle, might be a lack of the image within the orange div. But try the following:
You would have to utilize the overflow: hidden property.
By doing this you hide the extra and disable the scrolling which sounds like what you need and are experiencing.
See the explanation here as well as its uses.