在容器 CSS 中使用 100% 时面临问题。在这里，我附上了图像，您可以在其中看到右侧图像中显示的红色背景颜色。
在这里，我给你我所有的 CSS 代码 jsfiddle 链接。请看一下并告诉我我需要修改哪些 CSS，以便所有角度背景（红色、黄色、绿色）都不会显示。
我在不同 ID 中给出的总宽度也超过了 100%（左边我给出了 39%，中间 50% 和右边 34%），总共 123%。我从我的角度知道这是错误的，但我找不到任何其他方法来修复该设计。
我的电脑屏幕分辨率是 1600 到 900，在实现了这些 CSS 之后，我只在右图中看到了红色背景。但是在较小的屏幕中，正如您在链接中看到的那样，所有其他背景图像都会显示出来。
HTML
<div id="container">
<div id="left"><img src="http://media-cdn.tripadvisor.com/media/photo-s/03/c3/1f/5f/working-people-exhibit.jpg"/></div>
<div id="middle"><img src="http://global.fncstatic.com/static/managed/img/Health/Women%20Working.jpg"/></div>
<div id="right"><img src="http://www.koindo.com/images/WORKING%20PEOPLE%20IMAGE.jpg"/></div>
</div>
CSS
#container{
width:100%;
background-color:orange;
height:300px;
overflow:hidden;
position:relative;
}
#left{
position:absolute;
left:-4%;
display:inline-block;
width:39%;
background-color:red;
height:300px;
transform:skew(-20deg,0deg);
-ms-transform:skew(-20deg,0deg); /* IE 9 */
-webkit-transform:skew(-20deg,0deg); /* Safari and Chrome */
z-index:1;
overflow:hidden;
}
#left img{
transform:skew(20deg,0deg);
-ms-transform:skew(20deg,0deg); /* IE 9 */
-webkit-transform:skew(20deg,0deg); /* Safari and Chrome**/
width:100%;
height:100%;
}
#middle{
position:absolute;
margin-left:30%;
display:inline-block;
width:50%;
background-color:green;
height:300px;
transform:skew(-20deg,0deg);
-ms-transform:skew(-20deg,0deg); /* IE 9 */
-webkit-transform:skew(-20deg,0deg); /* Safari and Chrome */
z-index:2;
border-left:10px solid white;
overflow:hidden;
}
#middle img{
transform:skew(20deg,0deg);
-ms-transform:skew(20deg,0deg); /* IE 9 */
-webkit-transform:skew(20deg,0deg); /* Safari and Chrome**/
margin-left:-11%;
width:100%;
height:100%;
}
#right{
position:absolute;
right:-4%;
display:inline-block;
width:34%;
background-color:red;
height:300px;
border-left:10px solid white;
transform:skew(-20deg,0deg);
-ms-transform:skew(-20deg,0deg); /* IE 9 */
-webkit-transform:skew(-20deg,0deg); /* Safari and Chrome */
z-index:3;
overflow:hidden;
}
#right img{
transform:skew(20deg,0deg);
-ms-transform:skew(20deg,0deg); /* IE 9 */
-webkit-transform:skew(20deg,0deg); /* Safari and Chrome**/
width:100%;
height:100%;
}
（在 JSFiddle 上：http: //jsfiddle.net/swati712/XQNzu/5/）