<div class="filmstrip">
  <div class="yellow-center"></div>
  <div class="left-squares squares">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="right-squares squares">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

* {
  margin: 0;
}

body {
  width: 100%;
  height: 100vh;
  background: #9a63c1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.filmstrip {
  width: 25vw;
  height: 25vw;
  background: #315a6b;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.filmstrip::after{
  position:absolute;
  content:'';
  background:rgba(0,0,0,.2);
  width:50%;
  height:100%;
  right:0;
  z-index:1;
}

.yellow-center {
  background: #ffc301;
  width: 15vw;
  border-radius: 1.5vw;
  height: calc(25vw / 3 - 0.5vw);
  position: relative;
}

.yellow-center::before,
.yellow-center::after {
  content: "";
  background: #ffc301;
  height: 95%;
  width: 100%;
  position: absolute;
}

.yellow-center::before {
  top: calc(-100% - 0.76vw);
  border-radius: 0 0 1.5vw 1.5vw;
}

.yellow-center::after {
  bottom: calc(-100% - 0.76vw);
  border-radius: 1.5vw 1.5vw 0 0;
}

.squares {
  position: absolute;
  height: 85%;
  width: 5vw;
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  align-items:center;
  z-index:2;
}

.squares::before, .squares::after{
  content:'';
  position:absolute;
  background:#9a63c1;
  width:2vw;
  height:2vw;
}

.squares::before{
  top:-3vw;
}

.squares::after{
  bottom:-3vw;
}



.squares div{
  background:#9a63c1;
  width:2vw;
  height:2vw;
}

.left-squares {
  left: 0;
}

.right-squares{
  right:0;
}