css：略微倾斜的边界半径

Question

我想用html和css创建一个便利贴。 我的代码是这样的：

＆＃13;

＆＃13;

.div{
 margin:50px;
 position:relative;
}
.box {
background: #ff1;
height: 178px;
width: 409px;
margin: 25px;
/*padding: 20px;*/
position: relative;
overflow: hidden;

border-left: 0px;
border-top-left-radius:70px;
border-bottom-right-radius:30px
}
.box:before {
content: "";
display: block;
background: #fff;
position: absolute;
top: -38px;
left: -268px;
width: 310px;
height: 248px;
border-bottom-right-radius: 70px;
padding:0px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我的问题是右键 这是相当曲线。但我会略微倾斜。就像你在图像中看到的一样。 有人可以帮帮我吗？感谢。

Answer 1

＆＃13;

＆＃13;

div {
  width: 200px;
  height: 150px;
  border-radius: 0 0 10% 0/0 0 40% 0;
  background-color: yellow;
  position: relative;
}
div:after {
  content: '';
  display: block;
  position: absolute;
  width: 50px;
  height: 150px;
  border-radius: 0 0 90% 0/0 0 60% 0;
  background-color: white;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;