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>