如何用CSS实现菜单中间的切角效果？已尝试伪元素及圆角属性未果

我明白你想给头部中间的Logo区域底部加上切角效果，纯CSS完全可以搞定，不用合并图片，我给你推荐两种实用的方法，完美适配你现有的Grid布局：

方法一：使用clip-path（最简单直观） #

clip-path是实现自定义形状最直接的方式，代码改动极小，效果精准：

修改你的.header__center样式，添加以下代码即可：

.header__center {
  grid-area: center;
  /* 新增切角相关样式 */
  position: relative;
  padding: 10px 25px; /* 根据Logo大小调整内边距，避免Logo被裁剪 */
  clip-path: polygon(0 0, 100% 0, 100% 85%, 92% 100%, 8% 100%, 0 85%);
  background-color: #FFF; /* 和header背景色保持一致，防止裁剪后露出下层内容 */
}

• clip-path的polygon参数可以自由调整：比如92% 100%和8% 100%是底部两个切角的顶点，数值越靠近50%，切角越明显；调整85%可以控制切角的起始高度。
• 这个方法的优势是代码极简，切角边缘平滑，现代浏览器都支持。

方法二：使用伪元素+渐变（兼容旧浏览器） #

如果你之前尝试伪元素没成功，大概率是没利用渐变模拟透明切角，或者伪元素的定位、层级没设置对。这个方法可以兼容旧浏览器，同时保持布局灵活性：

给.header__center添加相对定位，再用两个伪元素分别实现左右切角：

.header__center {
  grid-area: center;
  /* 新增基础定位样式 */
  position: relative;
  padding: 10px 25px;
  z-index: 1; /* 确保Logo在切角上层 */
}

.header__center::before,
.header__center::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 50%;
  height: 20px; /* 调整这个值可以改变切角的高度 */
  z-index: -1; /* 让切角在Logo下层 */
}

.header__center::before {
  left: 0;
  background: linear-gradient(to bottom right, transparent 50%, #FFF 50%);
}

.header__center::after {
  right: 0;
  background: linear-gradient(to bottom left, transparent 50%, #FFF 50%);
}

• 两个伪元素分别覆盖左右半区，通过线性渐变实现透明的切角效果，背景色和header保持一致，视觉上完全融合。
• 调整height值可以控制切角的大小，渐变方向确保切角边缘过渡自然。

完整修改后的CSS代码（以方法一为例） #

把切角效果整合到你原有代码中：

* { box-sizing: border-box; }
ul, li { list-style: none; line-height: 1; display: inline-block; }
.header { line-height: 1; padding-top: 15px; background-color: #FFF; }
.header>div { display: grid; grid-column-gap: 90px; align-items: center; grid-template-columns: 1fr auto 1fr; grid-template-areas: "left center right"; }
.header ul.menu>li:not(:first-child) { margin-left: 35px; }
.header li { display: inline-block; }
.header__left { grid-area: left; justify-self: right; }
.header__center { 
  grid-area: center; 
  position: relative;
  padding: 10px 25px;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 92% 100%, 8% 100%, 0 85%);
  background-color: #FFF;
}
.header__right { grid-area: right; }

这样修改后，你的头部中间Logo区域底部就会有完美的切角效果，完全基于纯CSS实现，不需要改动现有HTML结构～

内容的提问来源于stack exchange，提问作者Théo Benoit