没有突出的图像的裁剪部分

我成功实现了我的目标，但这样做的div粘在正常区域之外，需要滚动。我怎样才能实现这种掩模，同时保持水平包含的所有内容。我试图改变各种元素的位置，似乎无法实现这一目标。 *注意颜色仅供参考，最后红色/蓝色/绿色的div会变成白色。没有突出的图像的裁剪部分

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>

来源

2016-09-19 Leeish

我有困难的时候，在你的提琴重建的问题，可能是缺乏橙色格内的图像。但请尝试以下操作：

您将不得不使用overflow: hidden属性。

通过这样做，你隐藏了额外的功能，并禁用了滚动，这听起来像你需要和正在经历的。

查看explanation here以及它的用途。

来源

2016-09-19 18:23:16 Illdapt

哇。我太努力了。在这里我定位和移动，等等等等等等，我忘记了简单的溢出属性。 * facepalm * – Leeish

我认为，作为开发者，我们开始走入预期灾难的问题。我多次分享你的facepalm。希望你解决。干杯 – Illdapt

仍在努力将面具的“箭头”部分集中，但我想我会得到它。 – Leeish

没有突出的图像的裁剪部分

回答

相关问题