css: 稍微倾斜的边界半径

Question

我想用 html 和 css 创建便签。我的代码是这样的：

.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;
}

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

我的问题是右键这是相当曲线。但我会稍微倾斜。就像你在图片中看到的一样。任何人都可以帮助我吗？谢谢

Answer 1

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;
}

<div></div>

css: 稍微倾斜的边界半径

css: slightly angled border radius

html

css

border