css: rayon de bordure légèrement incliné

Question

Je veux créer une note autocollante avec html et css. mon code est comme ceci:

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

Mon problème est le bouton de droite Il est tout à fait des courbes. Mais je serais légèrement incliné. Comme ce que vous voyez dans l'image. Est-ce que n'importe quel corps peut m'aider s'il vous plait? Merci.

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>