css - 是否可以制作具有凸右边框和凹左边框的div？

Question

我正在尝试使用 adiv和 CSS3 创建以下效果。为了实现右侧，我使用了border-radius 属性。有没有办法让左边的边框凹进去？

Answer 1

你在寻找这样的东西吗？

基本上插入第二个 div:before并给它一个与 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;
}