如图,圆角带斜切的按钮如何实现?

Question

看到别人app里的一个按钮,是圆角加倾斜的,如下图所示

自己尝试编写,用clip-path进行剪裁,会发现切割下来边缘是直角,如下图所示

所以该怎么弄,才能都是圆角呢?

下面的代码是边缘直角,希望大佬帮忙改成圆角

<div style="display:flex;">
  <div class="up">涨58%</div>
  <div class="down">跌58%</div>
</div>


=====css部分====
.up{
  clip-path:polygon(0% 0%,100% 0%,90% 100%,0% 100%);
box-sizing:border-box;width:250px;height:40px;line-height:40px;padding-left:10px;border-top-left-radius:99px;border-bottom-left-radius:99px;background:#38f;
 }
.down{
   clip-path:polygon(10% 0%,100% 0%,100% 100%,0% 100%);
   text-align:right;padding-right:10px;box-sizing:border-box;width:250px;height:40px;line-height:40px;border-top-right-radius:99px;border-bottom-right-radius:99px;background:#ac3;
 }

Answer 1

CSS部分：

.outer {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 200px;
            height: 50px;
            background: #be1321;
            background-repeat: no-repeat;
            border-radius: 25px 5px 5px 25px;
            filter: drop-shadow(0px 10px 21px rgb(203, 42, 42, 0.38));
            position: relative;
            cursor: pointer;
        }

        .outer::after {
            position: absolute;
            content: '';
            right: -8px;
            width: 40px;
            height: 50px;
            border-radius: 5px;
            transform: skewX(-20deg);
            background: #be1321;
            z-index: 0;
        }

        .inner {
            position: absolute;
            right: 0;
            z-index: 1;
            line-height: 50px;
            overflow: hidden;
            width: 100%;
            height: 50px;
            font-size: 14px;
            color: #fff;
            text-align: center;
        }

html部分：

 <div class="outer">
        <div class="inner">按钮文字</div>
    </div>

纯色的话可以这么搞，但是如果涉及到按钮渐变的话就会有问题
新增水平渐变

.skew {
      position: relative;
      width: 120px;
      height: 64px;
    }

    .skew::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 10px 32px 32px 10px;
      background:linear-gradient(90deg, red, orange, transparent);
      transform: skewX(15deg);
    }

    .skew::before {
      content: "";
      position: absolute;
      top: 0;
      right: -13px;
      width: 100px;
      height: 64px;
      border-radius: 32px;
      background: orange;
    }

<div class="skew">
    <div>aaa</div>
  </div>

这个是90度水平渐变的实现，效果如下：