如何为使用clip-path: polygon的元素实现左上角圆角效果

polygon() 只能生成纯直线段组成的多边形，原生不支持圆角参数，你可以通过以下两种方式实现需求：

方案1：改用 clip-path: path() 直接定义带圆角的裁剪路径 #

你当前的裁剪需求是切掉元素左上角5%宽度的直角区域，同时给裁剪后新的左上角加圆角，可以直接用SVG路径语法实现，示例代码（以下示例圆角大小为8px，可自行调整数值）：

.menu {
    width: 100%;
    float: right;
    height: 50px;
    /* 路径说明：M起点在5%宽度+圆角偏移的位置，加圆弧段实现圆角，其余边和你原有逻辑一致 */
    clip-path: path('M calc(5% + 8px) 0 L 100% 0 L 100% 100% L 0 100% L 0 8 A 8 8 0 0 1 8 0 Z');
    background-color: #1A2434;
}

如果需要调整圆角大小，直接替换代码里所有的8px为你需要的数值即可。

方案2：嵌套元素实现（适合不熟悉SVG路径语法的场景） #

通过外层容器加圆角+溢出隐藏，配合内层元素偏移实现原有斜切效果，代码如下：
HTML部分调整为嵌套结构：

<div class="menu-wrapper">
  <div class="menu"></div>
</div>

CSS部分：

.menu-wrapper {
  width: 100%;
  height: 50px;
  border-top-left-radius: 8px; /* 左上角圆角大小 */
  overflow: hidden;
}
.menu {
  width: 100%;
  height: 50px;
  margin-left: -5%; /* 对应你原有clip-path的5%偏移量 */
  clip-path: polygon(5% 0, 100% 0%, 100% 100%, 0% 100%);
  background-color: #1A2434;
}

这个方案不需要修改你原有clip-path的逻辑，只需要新增一层容器即可，兼容性更好。

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