html - 元素展开后窗口宽度

Question

我有一个 slider ，我想在图像的左侧和右侧放置一个倾斜的 div，所以我使用了 before 和 after 但我遇到了问题.使用 after 元素，它会扩展窗口宽度，我的意思是，由于 after 元素，窗口占用的宽度大于 100%。 JSFIDDLE

.slides{
  margin-top:40px;
  position:relative;
  padding:0;
  width:85%;
}
.slides::before{
  position:absolute;
  top: 0;
  left: -9%;
  width:17%;
  height:100%;
  background-color:white;
  content: "";
  color: blue;
  transform: skew(-27deg);
}
.slides::after{
  position:absolute;
  top: 0;
  right: -9%;
  width:17%;
  height:100%;
  background-color:white;
  content: "";
  color: blue;
  transform: skew(-27deg);
}
.slides li img{
  width:100%;
}

HTML

 <ul class="slides">
     <li style="display: block; width: 100%;" class="slide-21 ms-image"><img src="http://fakeimg.pl/1680x560/" alt="" class="slider-19 slide-21" /></li>
 </ul>

如果 after 元素不在窗口宽度之外，我怎样才能使 slider 达到 100% 宽度？

Answer 1

在 .slides 上使用 overflow:hidden 是否有效？

https://jsfiddle.net/4jdvjf8p/