How to create a filmstrip shape

Question

I am trying to achieve an old filmstrip shape (see image). I would like to be flexible in the amount of images, so I thought the best solution is to do only something with the right side, so the length of the filmstrip doesn't matter.

What is a good way to achieve this?

So the right part is always snapping to the right side of the filmstrip. I can make to parts, where the left part containing the image, and the right part the lower part. But then I don't have the round corners and also what I want is the border that follows the shape, because it will help the filmstrip to separate from the background.

Answer 1

There's a few approaches to this, but one would be to build the shape out of its composite pieces rather than trying to impose the full shape on it afterward. This way, you can add and remove items freely to the container and it will keep that same outer shape since it's only being dictated by the CSS applied to the last item.

You can apply a corner-cut styling to the last item in that sequence, and then follow it up with a smaller partially rounded rectangle to the right. This gets you part of the way there, it'd need some tweaking to look exactly the way that you want.

.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>