Question

我有一个滑块，我想在图像的左侧和右侧放置一个倾斜的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>

如何在不使窗口宽度超出后面元素的情况下使滑块100％宽度？

Answer 1

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

https://jsfiddle.net/4jdvjf8p/

元素展开窗口宽度后

1 个答案: