How to make an angular div with border radius at the buttom right?

I'm trying to make my div to look like this, without success. I tried using polygon method to get the result but the best result I could get is an angled line that doesn't match the border radius. I also tried using the transform method which didn't breed success either since I couldn't get it to show under my navigation div. Does anyone know a way to achieve this result without using SVG files? Here's my current code:

  <header>
    <div class="navigation">
      <div class="container">
        <div class="logo">
          <a class="h-logo" href="#">Agency</a>
        </div>
        <nav class="center">
          <a href="#">Home</a>
          <a href="#">About us</a>
          <a href="#">Our Services</a>
          <a href="#">Support</a>
        </nav>
        <nav class="right">
          <a class="contact-h" href="#">Contact</a>
        </nav>
      </div>
        <div class="container">
          <div class="sub-header">
            <div class="creative">
              <div class="design">
                <h1>Creative <br> Design Agency</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br> Etiam vel dolor id nulla gravida blandit.</p>
              </div>
              <div class="learn">
                <a class="learn-more" href="#">Learn More</a>
              </div>
            </div>
            <div class="vase">
              <img src="images/3.png" alt="">
            </div>
        </div>
      </div>
    </div>
  </header>

SCSS:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    list-style: none;
}

.navigation {
    background: #6426dd;
    background: -webkit-linear-gradient(0deg, #6426dd 0%, #7465fb 100%);
    background: linear-gradient(0deg, #6426dd 0%, #7465fb 100%);
    padding-bottom: 5em;

    .container {
        display: flex;
        justify-content: space-between;
        margin-left: auto;
        margin-right: auto;
        max-width: 1270px;
        width: 100%;
        padding: 1.125rem 1.5rem 1.125rem 1.5rem;
        align-items: center;
        padding-top: 2em;
    }

    .center {
        display: flex;
        margin-right: auto;
        margin-left: 4em;
        justify-content: space-between;
        width: 30%;
    }

    .contact-h {
        font-size: 20px;
        font-weight: 500;
        text-transform: uppercase;
        color: #6426dd;
        background:white;
        border-radius: 360px;
        padding: 0.9rem 2rem 0.9rem 2rem;
    }
    
    .contact-h:hover {
        background: #00DADC;
        transition: 1.2s;
        color: black;
    }

    a {
        color: white;
    }

    .h-logo {
        color: white;
        margin-right: 1.5em;
        text-transform: lowercase;
        font-size: 36px;
        align-items: center;
        font-weight:700;
    }

    .logo:hover {
        transform: scale(1.1);
    }

    h1 {
        color: white;
        font-size: 70px;
        font-weight: 600;
        line-height: 1.0;
    }

    p {
        margin-top: 2em;
        color: white;
    }

    .sub-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .learn {
        margin-top: 3em;
    }

    .learn-more {
        font-size: 20px;
        font-weight: 500;
        text-transform: uppercase;
        color: black;
        background:#00DADC;
        border-radius: 360px;
        padding: 0.9rem 4rem 0.9rem 4rem;
    }

    .learn-more:hover {
        background: white;
        color: #6426dd;
        transition: 1.2s;
    }

    a:hover {
        transform: scale(1.2);
    }
}

Solution 1:

a skew transformation combined with radius can do it:

.box {
  height: 300px;
  position: relative;
  z-index: 0;
  overflow:hidden;
}

.box:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20% 0 0;
  background:#7054f3;
  border-bottom-right-radius:100px;
  transform-origin:left;
  transform:skewY(-5deg);
}

<div class="box">

</div>