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>