是否可以制作具有凸右边框和凹左边框的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;
}