Css 制作梯形选项卡形状

我试图复制，但我有一些困难，使梯形形状的不同标签。我浏览了源代码，在开发工具中，我一个接一个地删除了每个css属性，但我仍然没有弄清楚。我也试过了

我做了一个尝试复制它（目前没有梯形）

导航{
背景：白色；
边框底部：2个实心#50bff；
}
导航ul{
保证金：0；
}
李国荣{
显示：内联块；
}
导航a{
填充：1rem；
颜色：#505050；
显示：块；
文字装饰：无；
}
主动导航{
背景：#50bff；
}

试试这个：

ul>li>a:悬停{
背景：#50bff；
过渡：所有。2轻松；
颜色：白色；
}
ul>li>a{
文本对齐：居中；
左：0；
底部：0；
右：0；
边框左上半径：8px；
边框右上角半径：8px；
宽度：100px；
身高：120%；
z指数：-1；
变换：透视（5px）旋转（2deg）；
变换原点：底部；
}
导航{
背景：白色；
边框底部：2个实心#50bff；
}
导航ul{
保证金：0；
}
李国荣{
显示：内联块；
}
导航a{
填充：1rem；
颜色：#505050；
显示：块；
文字装饰：无；
}

我在源代码中找到了梯形。 这是一个透视变换，看看这把小提琴

div{
宽度：50px；
高度：50px；
背景：浅蓝色；
边界半径：5px；
变换：透视（5px）旋转（2deg）；
变换原点：底部；
}

---

以下是塑造元素的一些重要说明：

你要找的是这样的：

#trapezoid 
{ border-bottom: 100px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; }

---

这与我的问题无关？是的，我只是添加了我的问题：）我在你的问题中一开始理解你试图归档这个悬停效果，但现在应该可以了。是的，就像上面的答案一样，文本也被转换了。我认为这与：之后有关，但我不确定。我现在正在调查。谢谢，令人恼火的是，里面的文本也被转换了。虽然已经晚了很多，但我想我应该补充一点：你可以通过对文本应用相反的转换来取消文本的翻译。唯一的错误是，它的边缘看起来有点模糊。

#trapezoid 
{ border-bottom: 100px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; }