是否可以制作具有凸右边框和凹左边框的div？ [复制]答案

【问题标题】：Is it possible to make a div with a convex right border and concave left border? [duplicate]是否可以制作具有凸右边框和凹左边框的div？ [复制]
【发布时间】：2012-07-30 19:49:39
【问题描述】：

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

【问题讨论】：

从技术上讲，您不能使其凹入（如放置负边界半径），但the visual effect can be achieved as demonstrated in the answer to this question。
对于左侧部分，只需包含一个具有所需边框半径的白色 div，将其设置为通过绝对定位与相关 div 重叠，并将两者都包含在包装器 div 中。
@Cupidvogel--您的建议与上面链接中的“原始答案”基本相同（只是我使用了伪元素而不是额外的 div）。但是，该链接中的修订答案实际上允许该凹入部分是透明，如果在凹入区域后面不仅仅是纯色，这可能会非常好。

标签： css

【解决方案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;
}

【讨论】：