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

2023年8月10日 299次阅读

参见英文答案 >
Is a concave border radius possible?                                    5个

我试图使用div和CSS3创建以下效果.为了实现右侧,我使用了border-radius属性.有没有办法让左边的边框凹陷？ 最佳答案 你在寻找像
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;
}
点赞