没有突出的图像的裁剪部分
问题描述:
我成功实现了我的目标,但这样做的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>
答
我有困难的时候,在你的提琴重建的问题,可能是缺乏橙色格内的图像。但请尝试以下操作:
您将不得不使用overflow: hidden
属性。
通过这样做,你隐藏了额外的功能,并禁用了滚动,这听起来像你需要和正在经历的。
查看explanation here以及它的用途。
哇。我太努力了。在这里我定位和移动,等等等等等等,我忘记了简单的溢出属性。 * facepalm * – Leeish
我认为,作为开发者,我们开始走入预期灾难的问题。我多次分享你的facepalm。希望你解决。干杯 – Illdapt
仍在努力将面具的“箭头”部分集中,但我想我会得到它。 – Leeish