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