css - 使用 CSS 在设计布局上制作拱形曲线的问题

Question

我正在设计一张卡片，我需要使用 css 使红色/栗色部分(从黑色部分)向内 flex 。请协助？

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>