lucky_oak 2020-05-13 10:51 采纳率: 100%
浏览 2604
已采纳

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;
    }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 sqpingboot在父模块已经引入了mybatisplus 在子组件不写版本号还是报错
  • ¥20 Lumerical FDTD solutions 中模型的相对阻抗,有效介电常数和有效磁导率的实部和虚部的数据如何获得?
  • ¥100 sql reporting service 远程smtp服务器配置支持
  • ¥15 ppyoloe_r带角度目标检测,loss_cls没法收敛
  • ¥15 淘宝交易指数如何解读,其关联的数据指标是什么
  • ¥15 Linux下安装搜狗拼音不能显示中文
  • ¥15 事件7000导致的自动重启如何解决
  • ¥15 (标签-matlab|关键词-m3)
  • ¥20 做一个web书店,带答辩
  • ¥15 #求带 python,使用pycharm爬取智联招聘数据资源并保存为Excel文件,同时以图表形式呈现