画像が切り抜かれずに切り取られます

Question

私は目標を達成することに成功しましたが、そうすることで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>

Answer 1

私はあなたのフィドルで問題を再現困難な時間を過ごしています、オレンジのdiv内の画像の欠如かもしれません。しかし、以下を試してください：

overflow: hiddenプロパティを利用する必要があります。

このようにすると、余分なものを隠すことができ、必要なもののように聞こえるスクロールを無効にすることができます。

explanation hereおよびその使用を参照してください。