如何创建幻灯片形状

Question

我正在尝试实现旧的幻灯片形状（见图）。 我想在图像数量上保持灵活性，所以我认为最好的解决方案是只对右侧做一些事情，所以幻灯片的长度并不重要。

实现这一目标的好方法是什么？

因此，右侧部分始终会捕捉到幻灯片的右侧。我可以制作多个部分，其中左侧部分包含图像，右侧部分包含下部。但我没有圆角，而且我想要的是跟随形状的边框，因为它将帮助幻灯片与背景分离。

Answer 1

有几种方法可以实现这一点，但其中一种方法是用复合件构建形状，而不是事后尝试将完整的形状强加在其上。这样，您可以在容器中自由添加和删除项目，并且它将保持相同的外部形状，因为它仅由应用于最后一个项目的 CSS 决定。

您可以对该序列中的最后一项应用切角样式，然后在右侧添加一个较小的部分圆角矩形。这让你已经完成了部分工作，需要一些调整才能看起来完全符合你想要的方式。

.filmStrip {
  display: flex;
  border-radius: 4px;
  overflow: hidden;
}
.filmStrip__items {
  display: flex;
}
.filmStrip__item {
  background: black;
  width: 150px;
}
.filmStrip__item img {
  width: 100%;
  display: block;
  transform: scale(0.9);
}

.filmStrip__items > .filmStrip__item:last-of-type,
.filmStrip__items > .filmStrip__item:last-child > img
{
    --corner: 20%;
   clip-path: polygon(
    /* top edge */
    0% 0%, /* left top */
    calc(100% - var(--corner)) 0%, /* right top */
    /* right edge */
    100% var(--corner),              /* right top */
    100% 100%, /* right bottom */
    /* bottom edge*/
    100% 100%, /* right bottom */
    0 100%, /* left bottom*/
    /* left edge */
    0% 100%, /* left bottom */
    0% 0% /* left top */
  );

}

.filmStrip__after {
  display: block;
  width: 100px;
  height: 120px;
  background: black;
  border-radius: 0 4px 4px 0;
  margin-top: auto;
 }

<div class="filmStrip">
  <div class="filmStrip__items">
    <div class="filmStrip__item"><img src="https://is3-ssl.mzstatic.com/image/thumb/Purple1/v4/c8/2d/ef/c82def60-ad06-fe32-8361-4b33d50f8875/source/256x256bb.jpg" /></div>
    <div class="filmStrip__item"><img src="https://is3-ssl.mzstatic.com/image/thumb/Purple1/v4/c8/2d/ef/c82def60-ad06-fe32-8361-4b33d50f8875/source/256x256bb.jpg" /></div>
    <div class="filmStrip__item"><img src="https://is3-ssl.mzstatic.com/image/thumb/Purple1/v4/c8/2d/ef/c82def60-ad06-fe32-8361-4b33d50f8875/source/256x256bb.jpg" /></div>
    <div class="filmStrip__item"><img src="https://is3-ssl.mzstatic.com/image/thumb/Purple1/v4/c8/2d/ef/c82def60-ad06-fe32-8361-4b33d50f8875/source/256x256bb.jpg" /></div>
  </div>
  <div class="filmStrip__after"></div>
</div>