如何使用html、css或tailwindcss制作这样的凹口设计

Question

我需要做这个设计。

我使用了这种剪辑路径方法，但边缘不平滑。我怎样才能实现设计？

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

Answer 1

用 polygon 很难做到这一点。您可以尝试添加更多点（更多），但结果可能并不完美。 使用 path 属性会得到更好的结果，但尚未完全支持（https://caniuse.com/css-clip-path）。

我会选择SVG背景或box-shadow。

如果您可以从设计源文件中将路径导出为 svg，这将是最快的方法；）如果不能，您可以随时尝试自己绘制它（例如在 Inkscape 中）。

对于 box-shadow 方法，您必须使用定制阴影制作 4 个 div（2 个位于“缺口”的左侧，2 个位于“缺口”的右侧）。在这里您可以检查如何将弯曲形状制作为盒子阴影：https://css-tricks.com/the-shapes-of-css/#aa-reverse-corners-via-zberno。