如何使用CSS实现导航栏两侧完美流畅的弧形曲线效果

你当前代码的曲线生硬问题是border-radius的参数设置不对，不需要额外引入SVG或者伪元素，直接调整圆角参数就能实现和参考效果完全一致的顺滑曲线，后续配合flex布局拼接两侧容器即可。

核心修正点 #

原代码同时给多个角设置了不必要的圆角参数，导致曲线形状偏移，正确的单侧左侧容器圆角规则如下：

• 左上角、左下角保持直角，无圆角
• 右上角仅保留8px左右的微小圆角，匹配参考样式的细节
• 右下角设置大弧度圆角，拉出顺滑的下切曲线

完整可运行代码 #

我顺便把flex布局的两侧容器拼接逻辑也写好了，你可以直接基于这个修改：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>导航栏实现</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 导航栏flex容器 */
        .navbar {
            display: flex;
            width: 100%;
        }
        /* 左侧导航块 */
        .nav-left {
            width: 500px;
            height: 90px;
            background-color: #c8102e;
            padding: 0 24px;
            /* 核心曲线参数 */
            border-radius: 0 8px 120px 0 / 0 0 100% 0;
        }
        /* 右侧导航块 */
        .nav-right {
            flex: 1;
            height: 90px;
            background-color: #111827;
            /* 对称曲线参数 */
            border-radius: 120px 0 0 0 / 100% 0 0 0;
            /* 消除flex拼接的白边缝隙 */
            margin-left: -1px;
        }
    </style>
</head>
<body>
    <div class="navbar">
        <div class="nav-left">左侧内容区</div>
        <div class="nav-right">右侧内容区</div>
    </div>
</body>
</html>

参数调整说明 #

• 如果需要调整曲线的陡峭程度，只需要修改两个容器圆角里的120px数值：数值越大曲线越平缓，数值越小曲线弯折感越强
• 右上角的小圆角可以根据导航栏实际高度微调，保持视觉上不突兀的微圆角即可
• 两个容器拼接处的负边距不要删掉，不同浏览器渲染flex块的时候可能会出现1px的拼接白边，负边距可以完全规避这个问题

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