Css div底部的全宽响应箭头

嘿

目前我正在尝试做以下导航

但最终得到了以下结果

如何降低我在底部添加的箭头的高度，但保持全宽

nav{
位置：相对位置；
显示：内联块；
高度：50px；
宽度：100%；
文本对齐：居中；
颜色：白色；
背景：灰色；
线高：50px；
文字装饰：无；
垫底：15%；
背景剪辑：内容框；
溢出：隐藏；
}
导航：之后{
内容：“；
位置：绝对位置；
顶部：50px；
左：0；
背景色：继承；
垫底：50%；
宽度：57.7%；
z指数：-1；
-webkit转换原点：0；
-ms变换原点：0；
变换原点：0；
-webkit变换：旋转（-30度）斜交（30度）；
-ms变换：旋转（-30度）倾斜（30度）；
变换：旋转（-30度）斜X（30度）；
}

---

nav

使用边界三角形技术与

vw

单位：

30px是箭头高度

nav {
    position: relative;
    height: 50px;
    width:100%;
    background: gray;
}
nav:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  border-top: 30px solid red;
  border-left: 50vw solid transparent;
  border-right: 50vw solid transparent;
}

nav

您可以使用并将其附加到导航栏，而不是所有的倾斜逻辑。它更简单

<nav>nav</nav>