Perforated ticket

html #ui
<div class='ticket'>
  <div>
    <div class='upper'></div>
    <div class='lower'>
      <svg class='divider' height="2" viewBox="0 0 352 2" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 1H352" stroke="#E6E7E8" stroke-dasharray="4 4"></path>
      </svg>

      <div class='cutout left'>
        <svg width="6" height="12" viewBox="0 0 6 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g clip-path="url(#clip0_2029_22)">
            <path d="M0 2C0.656613 2 1.30679 2.10346 1.91341 2.30448C2.52005 2.5055 3.07124 2.80014 3.53554 3.17157C3.99982 3.54301 4.36812 3.98396 4.6194 4.46927C4.87067 4.95457 5 5.47471 5 6C5 6.52529 4.87067 7.04543 4.6194 7.53073C4.36812 8.01604 3.99982 8.45699 3.53554 8.82843C3.07124 9.19986 2.52005 9.4945 1.91341 9.69552C1.30679 9.89654 0.656613 10 0 10V6V2Z" fill="#F5F6F7"></path>
            <path d="M1 12V10C2.06087 10 3.07828 9.57857 3.82843 8.82843C4.57857 8.07828 5 7.06087 5 6C5 4.93913 4.57857 3.92172 3.82843 3.17157C3.07828 2.42143 2.06087 2 1 2V0" stroke="#E6E7E8" stroke-width="1" stroke-linejoin="round"></path>
          </g>
          <defs>
            <clipPath id="clip0_2029_22">
              <rect width="6" height="12" fill="white"></rect>
            </clipPath>
          </defs>
        </svg>
      </div>

      <div class='cutout right'>
        <svg width="6" height="12" viewBox="0 0 6 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g clip-path="url(#clip0_2029_22)">
            <path d="M0 2C0.656613 2 1.30679 2.10346 1.91341 2.30448C2.52005 2.5055 3.07124 2.80014 3.53554 3.17157C3.99982 3.54301 4.36812 3.98396 4.6194 4.46927C4.87067 4.95457 5 5.47471 5 6C5 6.52529 4.87067 7.04543 4.6194 7.53073C4.36812 8.01604 3.99982 8.45699 3.53554 8.82843C3.07124 9.19986 2.52005 9.4945 1.91341 9.69552C1.30679 9.89654 0.656613 10 0 10V6V2Z" fill="#F5F6F7"></path>
            <path d="M1 12V10C2.06087 10 3.07828 9.57857 3.82843 8.82843C4.57857 8.07828 5 7.06087 5 6C5 4.93913 4.57857 3.92172 3.82843 3.17157C3.07828 2.42143 2.06087 2 1 2V0" stroke="#E6E7E8" stroke-width="1" stroke-linejoin="round"></path>
          </g>
          <defs>
            <clipPath id="clip0_2029_22">
              <rect width="6" height="12" fill="white"></rect>
            </clipPath>
          </defs>
        </svg>
      </div>
    </div>
  </div>
</div>

<style>
  .ticket {
    background: #F5F6F7;
    border: 1px solid #E6E7E8;
    border-radius: 12px;
    padding: 4px;
    width: 364px;
  }

  .ticket > div {
    background: white;
    border: 1px solid #E6E7E8;
    border-radius: 8px;
  }

  .upper {
    height: 160px;
  }

  .lower {
    height: 48px;
    position: relative;
  }

  .divider {
    width: calc(100% - 2px);
    translate: 0 -1px;
  }

  .cutout {
    position: absolute;
    top: 0;
  }

  .cutout.right {
    right: 0;
    translate: 1.5px -50%;
    rotate: 180deg;
  }

  .cutout.left {
    left: 0;
    translate: -1.5px -50%;
  }
</style>