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

Question

这种布局该怎么写，实在是不会了，想了好久，一直没有很好地方案，求大神提点一二，提前谢过了

Answer 1

按照你的思路完全可以，而且位置的计算也不麻烦，完全可以实现。设置三个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;
}