如何用HTML/CSS/TailwindCSS实现平滑边缘的凹口式设计？

我需要实现图中的这种凹口设计，使用了如下clip-path方法，但边缘不够平滑，请问该如何实现这个设计？

.nav {
    width: 14rem;
    height: 4rem;
    background-color: white;
    clip-path: polygon(0 0, 100% 0, 70% 100%, 30% 100%);
}

解决方案 #

你用的polygon是纯直线段组成的路径，自然没有圆角过渡，要实现平滑边缘可以用以下两种方法：

方法1：使用clip-path: path()定义曲线路径

通过path()函数绘制带圆角的二次贝塞尔曲线，让凹口边缘呈现平滑弧度：

.nav {
    width: 14rem;
    height: 4rem;
    background-color: white;
    /* 路径逻辑：从左上角到右上角，延伸到圆角控制点后绘制凹口圆角，最后闭合路径 */
    clip-path: path('M0,0 L100%,0 L100%,calc(100% - 0.5rem) Q70%,calc(100% - 0.5rem) 70%,100% L30%,100% Q30%,calc(100% - 0.5rem) 0%,calc(100% - 0.5rem) Z');
}

可以调整代码里的0.5rem来改变圆角大小，适配不同的凹口弧度需求。

方法2：伪元素叠加（兼容性更优）

不用clip-path，通过伪元素模拟凹口，边缘天然平滑，对旧浏览器更友好：

.nav {
    width: 14rem;
    height: 4rem;
    background-color: white;
    position: relative;
    overflow: hidden;
}

.nav::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 30%;
    width: 40%;
    height: 0.5rem; /* 控制凹口的深度 */
    background-color: #页面背景色; /* 必须和nav所在的父容器背景色一致 */
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

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