볼록한 오른쪽 테두리와 오목한 왼쪽 테두리로 div를 만들 수 있습니까?

Question

div 및 CSS3을 사용하여 다음 효과를 생성하려고합니다. 오른쪽 측면을 얻으려면 border-radius 속성을 사용했습니다. 왼쪽에 오목면을 만들 수있는 방법이 있습니까?

Answer 1

this과 같은 것을 찾고 계십니까?

기본적으로 :before을 사용하여 두 번째 div를 삽입하고 div 뒤에있는 배경색과 동일한 배경색을 지정하십시오. 다음은 코드를 단순화 한 것입니다. JSFiddle은 이미지의 모양과 일치하는 일부 시도를합니다.

div { 
    width: 100px; 
    height: 80px; 
    background: green; 
    border-radius: 0 45px 45px 0; 
} 
div:before { 
    content:""; 
    width: 45px; 
    height: 80px; 
    background: #fff; 
    border-radius: 0 45px 45px 0; 
    position: absolute; 
}