css - 右に凸の境界線と左に凹状の境界線を持つdivを作成することは可能ですか？

Question

divとCSS3を使用して次の効果を作成しようとしています。右側を実現するために、border-radiusプロパティを使用しました。左側の境界線を凹面にする方法はありますか？

Answer 1

このようなものをお探しですか？

基本的に、を使用して2番目のdivを挿入し、:beforedivの背後の背景と同じ背景色を付けます。これが簡略化されたコードです。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;
}