lucky_oak
2020-05-13 10:51
采纳率: 100%
浏览 1.5k

css 矩形中间凹陷,边缘圆弧顺滑过渡,这种布局应该怎么实现,求助各位大神?

图片说明

这种布局该怎么写,实在是不会了,想了好久,一直没有很好地方案,求大神提点一二,提前谢过了
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • Menkongkong 2020-05-19 22:46
    已采纳

    按照你的思路完全可以,而且位置的计算也不麻烦,完全可以实现。设置三个div,样式如下图片说明

    div{
        width: 100px;
        height: 100px;
        background-color: #000;
        float: left;
    }
    .one{
        border-radius: 0 40px 0 0;
    }
    .two{
        margin-top: 30px;
        height: 70px;
        margin-left: -2px;
    }
    .two::after{
        content: '';
        position: absolute;
        margin-top: -60px;
        width: 100px;
        height: 100px;
        border-radius: 100px;
        background-color: #fff;
    }
    .three{
        margin-left: -2px;
        border-radius: 40px 0 0 0;
    }
    
    已采纳该答案
    1 打赏 评论
  • zqbnqsdsmd 2020-05-13 16:12
    打赏 评论
  • eve_midnight 2020-12-25 09:56

    上面这个大佬的wxml是什么?

    打赏 评论

相关推荐 更多相似问题