Problem using CSS to make an arch-like curve on a design layout

Question

Am working on a design of a card whereby I need to make the red/maroon part bend inwards (from the black part) using css. Please assist?

HTML Markup

 <div class="container phonecard2">
 </div>

<div class="btm-right">
</div>

CSS code

.container.phonecard2 {
    position: relative;
    background: #000;
    margin-top: 140px;
    width: 35%;
    height: 260px;
    padding: 20px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius: 15px;
}

.btm-right{
    position: absolute;
    width: 0;
    height: 0;
    bottom: 0;
    right:0;
    border-style: solid;
    border-width: 0 0 160px 450px;
    border-color: transparent transparent #ba0c2f transparent;
}

PNG image of my design after the above code

Answer 1

<div class="container phonecard2">
  <div class="btm-right"></div>
</div>
<style>
    .container.phonecard2 {
      position: relative;
      background: linear-gradient(to left, #ba0c2f 70%, #000000 30%);
      margin-top: 140px;
      width: 600px;
      height: 260px;
      padding: 20px;
      border-radius: 15px;
      overflow: hidden
    }

    .btm-right {
      position: absolute;
      background: #000;
      width: 800px;
      height: 680px;
      left: -130px;
      top: -330px;
      border-radius: 0 0 580px 0;
      transform: rotate(21deg);
    }
</style>