使用CSS在设计版面上制作类似弓形的曲线时出现问题

Question

我正在设计卡的设计，因此我需要使用CSS使红色/栗色部分向内弯曲（从黑色部分弯曲）。请协助？

HTML标记

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

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

CSS代码

.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图片

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>