我成功地实现了我的目标,但这样做时 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>
最佳答案
我很难在你的 fiddle 中重现这个问题,可能是橙色 div 中缺少图像。但请尝试以下操作:
您必须使用 overflow: hidden
属性。
通过这样做,您可以隐藏额外内容并禁用滚动,这听起来就像您需要和正在体验的那样。
参见 explanation here以及它的用途。
关于html - 在不突出的情况下裁剪图像部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39579530/