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>