我怎样才能在css中制作这个右上角的弯曲div？

【问题标题】：How can i make this top right curved div in css?我怎样才能在css中制作这个右上角的弯曲div？
【发布时间】：2021-08-27 04:01:30
【问题描述】：

我在为以下 div 设计 css 时没有什么困难，我尝试使用 border-radius 并尝试使用 psuedo 元素 弄脏我的手，但我我有点卡住了。

.box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 40px;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 10px rgba(0, 0, 0, 0.1);
    border-top-left-radius: 20%;
    border-bottom-left-radius: 40px;

 .childBox {
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
}

}

<div class="box">
   <div class="childBox">
       <img/>
    </div>
</div>

【问题讨论】：

你尝试了什么？请向我们展示您的尝试！
可能调查一下剪辑路径。
我唯一能建议的就是尝试使用 SVG 图像。
我添加了我的代码
您添加了一条 CSS 规则。我们需要看到minimal reproducible example

标签： javascript html css sass

【解决方案1】：

一些渐变可以帮助你

.box {
  width: 40px;
  padding-left:40px;
  height: 40px;
  background:
    linear-gradient(#fff 0 0) content-box,
    radial-gradient(50% 100% at bottom left,#0000 97%,white) 0 0   /40px 50%,
    radial-gradient(50% 100% at top right  ,white 97%,#0000) 0 100%/40px 50%;
  background-repeat:no-repeat;
  filter:drop-shadow(0 0 5px rgba(0, 0, 0, 0.4));
}

<div class="box">

</div>

改变颜色来理解谜题：

.box {
  width: 40px;
  padding-left:40px;
  height: 40px;
  background:
    linear-gradient(black 0 0) content-box,
    radial-gradient(50% 100% at bottom left,red 97%,blue) 0 0   /40px 50%,
    radial-gradient(50% 100% at top right  ,green 97%,pink) 0 100%/40px 50%;
  background-repeat:no-repeat;
}

<div class="box">

</div>

【讨论】：