如何使用CSS实现矩形div/背景底部向内弯曲效果？

当然有办法搞定这种底部内凹的弧形效果！你给出的代码其实已经是最简洁高效的方案之一了——借助CSS的border-radius属性就能轻松实现。

核心原理拆解 #

border-radius属性可以同时设置元素四个角的圆角半径，语法是border-radius: 左上 右上 右下 左下;。你代码里的0 0 200px 200px就意味着：

• 左上角和右上角保持直角（半径为0）
• 右下角和左下角设置200px的圆角半径，这样底部就会自然形成向内弯曲的弧形

完整可运行代码示例 #

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 100%;
            padding: 20px 0;
        }
        .curved {
            margin: 0 auto;
            width: 80%; /* 增加宽度让弧形效果更直观 */
            height: 400px;
            background: lightblue;
            border-radius: 0 0 200px 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="curved"></div>
    </div>
</body>
</html>

扩展调整技巧 #

• 如果想要更平缓的弯曲，只需增大200px的数值；想要更尖锐的弯曲，就减小这个数值
• 要是需要左右不对称的弧形，可以分别设置右下角和左下角的半径，比如border-radius: 0 0 150px 250px
• 如果需要更复杂的曲线形状（比如非圆弧的曲线），可以尝试使用CSS的clip-path属性或者伪元素叠加，但border-radius是实现这种基础弧形最省心的方式

内容的提问来源于stack exchange，提问作者DevJoe