裁剪图像部分没有伸出

Question

我成功地实现了我的目标但是这样做的div在正常区域之外并且需要滚动。如何在保持水平包含的同时实现这种掩蔽。我已经尝试改变各种元素的位置，似乎无法实现这一目标。 *注意颜色仅供参考，最后红色/蓝色/绿色div为白色。

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

我很难在你的小提琴中重新创造这个问题，可能是橙色div中没有​​形象。但请尝试以下方法：

您必须使用overflow: hidden属性。

通过执行此操作，您可以隐藏额外内容并禁用滚动，这听起来就像您需要和正在经历的那样。

请参阅explanation here及其用途。