html - 在不突出的情况下裁剪图像部分

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

我很难在你的 fiddle 中重现这个问题，可能是橙色 div 中缺少图像。但请尝试以下操作:

您必须使用 overflow: hidden 属性。

通过这样做，您可以隐藏额外内容并禁用滚动，这听起来就像您需要和正在体验的那样。

参见 explanation here以及它的用途。