Trouble with Scaling Background Image and Shape Together in Hero Section

I'm facing an issue with the scaling of a hero section in my web page. The hero section includes a background image and a custom shape (a big triangle/left arrow) created using the shape-default class. The goal is to have both the background image and the shape scale proportionally as the browser window is resized. But that doesn't happen as you can see below.

As the browser window is resized, the shape starts to bleed or creates a gap between itself and the background image. I've tried adjusting the background-size and clip-path properties, but the issue persists.

Here is the codepen for it https://codepen.io/boostai/pen/yLZEgro

HTML

<section class="uk-section uk-padding-remove background-hero" style="background-image: url(https://picsum.photos/1600/900)">
<div class="uk-flex uk-flex-right@l">
    <div class="shape-default uk-height-large@l uk-height-unset uk-background-purple uk-flex uk-flex-top uk-flex-middle@l">
        <div class="uk-margin-auto-left uk-width-4-5@s uk-padding-small-top uk-padding-remove-top@l">

            <h1 class="uk-text-white uk-text-boldest uk-margin-small-top uk-width-4-5@l">
                Lorem Ipsum is simply dummy text of the printing and typesetting </h1>

            <div class="uk-text-white uk-text-bold uk-width-4-5@l">
                <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>

        </div>
    </div>
</div>
</section>

CSS

.background-position-hero {
    background-size: 63% auto;
}

.background-hero {
    background-size: 50%;
    background-repeat: no-repeat;
}

/* MOBILE */
@media screen and (max-width: 960) {
    .background-hero {
        background-image: none;
    }
}

/* ----------- Retina Screens ----------- */
@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) {
    .background-hero {
        background-size: auto 100%;
        background-repeat: no-repeat;
    }
}

/* Hero
   ========================================================================== */
.homepage-hero {
    background-size: 60vw auto;
    background-repeat: no-repeat;
    background-position: left center;
    padding: 0;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* This makes the overlay and its content not block user interactions */
}

@media screen and (max-width: 960px) {
    .homepage-hero {
        height: auto;
    }

    .homepage-hero a {
        position: relative;
    }

    .overlay {
        top: 18%;
        left: 25%;
        height: auto;
    }
}

.shape-default {
    width: 60vw;
    /*  min-height: 450px;*/
    max-width: 100%;
    position: relative;
    overflow: hidden;
    clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 15% 100%, 5% 50%);
    z-index: 1;
    background-color: #59195d;
}

@media screen and (max-width: 960px) {
    .shape-default {
        width: 100%;
        border-radius: unset;
        min-height: 0;
        clip-path: none;
        padding: 0 15px;
    }

    .shape-default h1 {
        font-size: 1.6rem;
    }
}

/* Weight modifier
  ========================================================================== */
.uk-text-boldest {
    font-weight: 900;
}

/* Color modifiers
  ========================================================================== */
.uk-text-white {
    color: #fff !important;
}

/* Small
 ========================================================================== */

.uk-padding-small-top {
    padding-top: 15px;
}

/* Remove
 ========================================================================== */
/* Phone landscape and bigger */
@media (min-width: 640px) {
    .uk-padding-remove-top\@s {
        padding-top: 0 !important;
    }
    .uk-padding-remove-bottom\@s {
        padding-bottom: 0 !important;
    }
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .uk-padding-remove-top\@m {
        padding-top: 0 !important;
    }
    .uk-padding-remove-bottom\@m {
        padding-bottom: 0 !important;
    }
}
/* Desktop and bigger */
@media (min-width: 1200px) {
    .uk-padding-remove-top\@l {
        padding-top: 0 !important;
    }
    .uk-padding-remove-bottom\@l {
        padding-bottom: 0 !important;
    }
}
/* Large screen and bigger */
@media (min-width: 1600px) {
    .uk-padding-remove-top\@xl {
        padding-top: 0 !important;
    }
    .uk-padding-remove-bottom\@xl {
        padding-bottom: 0 !important;
    }
}

/* ========================================================================
   Component: Height
 ========================================================================== */
.uk-height-xlarge {
    height: 840px;
}
.uk-height-max-xlarge {
    max-height: 840px;
}
.uk-height-unset {
    height: unset;
}

/* Phone landscape and bigger */
@media (min-width: 640px) {
    .uk-height-unset\@s {
        height: unset;
    }
    .uk-height-large\@s {
        height: 450px;
    }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .uk-height-unset\@m {
        height: unset;
    }
    .uk-height-large\@m {
        height: 450px;
    }
}
/* Desktop and bigger */
@media (min-width: 1200px) {
    .uk-height-unset\@l {
        height: unset;
    }
    .uk-height-large\@l {
        height: 450px;
    }
}
/* Large screen and bigger */
@media (min-width: 1600px) {
    .uk-height-unset\@xl {
        height: unset;
    }
    .uk-height-large\@xl {
        height: 450px;
    }
}

/* Alignment
 ========================================================================== */
/*
 * Align items in the cross axis of the current line of the flex container
 * Row: Vertical
 */

/* Phone landscape and bigger */
@media (min-width: 640px) {
    .uk-flex-middle\@s {
        align-items: center;
    }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .uk-flex-middle\@m {
        align-items: center;
    }
}
/* Desktop and bigger */
@media (min-width: 1200px) {
    .uk-flex-middle\@l {
        align-items: center;
    }
}
/* Large screen and bigger */
@media (min-width: 1600px) {
    .uk-flex-middle\@xl {
        align-items: center;
    }
}

How can I ensure that the background image and the shape scale together and maintain their proportions as the browser window is resized?

Solution

Here is simple and responsive implementation:

section {
  position: relative;
  background: purple;
  padding-left: 50%;
  color: #fff;
}
section:before {
  content:"";
  position: absolute;
  inset: 0 50% 0 0;
  background: var(--img) center/cover;
  clip-path: polygon(0 0, 100% 0,calc(100% - 80px) 50%,100% 100%, 0 100%);
}
section h1 {
  font-size: 25px;
  margin: 0;
  padding: 1em;
}
section p {
  font-size: 19px;
  margin: 0;
  padding: 1em;
}
@media (max-width: 500px) {
  section {
    padding: 0;
  }
  section:before {
    content:none
  }
}

<section style="--img:url(https://picsum.photos/id/1014/800/400)">
  <h1> A Title </h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non nisl non neque ornare imperdiet. Sed in lorem in est aliquam cursus quis at felis. In sit amet feugiat turpis, sit amet iaculis ligula. Suspendisse diam tellus, commodo non eros eu,
    molestie auctor risus. Duis venenatis scelerisque urna pellentesque laoreet. </p>
</section>