如何使用HTML和CSS绘制包含文本的选项卡

我想让我的选项卡看起来像下图：

---

但我画不出这个。我去了W3学校，在网上看了几本教程，但我画不出这个。我甚至玩过伪元素，比如

：：before

和

：：after

，但仍然没有运气。每个选项将生成一个页面

您正在寻找的设计与中描述的类似。我张贴一个单独的答案，因为你需要的是一个更复杂的一点，由于梯度背景的存在，重叠的三角形区域（在下一个项目）和框阴影等

所使用的方法与该答案类似，即在每个

li

元素中添加两个伪元素，并在相反方向上倾斜以实现效果。以下是为您的设计完成的一些附加步骤：

• 将伪元素（

  ：在

  之后）添加到

  ul

  ，并将从半透明白色到透明再到半透明黑色的渐变设置为其背景图像。此伪元素的大小小于父级

  ul

  容器，这会产生渐变效果
• 逐步递减的

  z-索引

  分配给每个

  li

  元素，以向前推进较早的元素，并使其三角形位位于下一个元素之上

• box shadow

  和

  border right

  添加到

  li:before

  和

  li:after

  元素中，以获取箭头及其阴影
• 在

  ul

  周围添加一个纯白边框和两个

  框阴影

正如您在代码段的“完整页面视图”中所看到的，输出是响应的

ul{
位置：相对位置；
保证金：0；
填充：0；
线高：60px；
颜色：白色；
字体大小：粗体；
文本对齐：居中；
文本转换：大写；
边框：2倍纯白；
边界半径：30px；
列表样式类型：无；
盒影：2px2px0px#DDD，-2px2px0px#DDD；
空白：nowrap；
溢出：隐藏；
}
李{
位置：相对位置；
显示：内联块；
宽度：33.33%；
文本缩进：-20px；
}
李:以前,，
李：之后{
位置：绝对位置；
左：0；
内容：''；
身高：50%；
宽度：100%；
背景：rgb（31139188）；
右边框：3倍实心rgb（87153190）；
盒影：3px-2px2pRGBA（0,0,0,0.15）；
}
李：第一个孩子：以前，
李：第一个孩子：之后{
背景：rgb（255,0,0）；
}
李：以前{
顶部：0px；
变换：skewX（45度）；
变换原点：左下角；
z指数：-1；
}
李：之后{
底部：0px；
变换：skewX（-45度）；
变换原点：左上；
z指数：-2；
}
李：第一个孩子{
文本缩进：0px；
z指数：2；
}
李：第n种类型（2）{
z指数：1；
}
李：最后一个孩子{
宽度：钙（33.33%+15px）；
}
ul：之后{
位置：绝对位置；
内容：''；
顶部：3px；
左：3px；
高度：计算（100%-6px）；
宽度：计算（100%-6px）；
背景图像：线性渐变（到底部，rgba（255，255，255，0.5），rgba（0，0，0，0）25%，rgba（0，0，0，0）75%，rgba（0，0，0，0，0.05））；
边界半径：25px；
z指数：3；
指针事件：无；
}
/*如果你需要悬停效果*/
李：哈弗：以前，
李：悬停：之后{
背景：黄绿色；
}

文本
文本
文本

您还可以通过导航杆和flex进行中继

或下面的代码片段来运行

nav{
显示器：flex；
/*基本上有助于轻松均匀分布子对象（浮动、内联块、表格等也适用）*/
溢出：隐藏；
/*可能用于隐藏未舍入的链接和最后一个箭头*/
背景#0077AF；
字体大小：1.8vw；/*2em*/
/*大众用于演示，我不建议没有mediaqueries来控制最大和最小字体大小*/
填充：0；
/*重置*/
利润率：0.5em 15px；
/*随便*/
边界半径：2米；
/*图像是圆形的*/
盒影：0 3px白色，0 0 8px；
/*画边框和阴影*/
位置：相对位置；
/*将被用于Web2.0*/
}
导航：以前{
/*有光泽的东西*/
内容：''；
/*触发伪*/
位置：绝对位置；
/*关闭流量，以便粘在需要的地方*/
z指数：2；
/*最上面*/
指针事件：无；
/*点击*/
边界半径：2.5em；
/*增加边框半径，因为它小于父对象*/
顶部：5px；
左：10px；
右：10px；
底部：0；
盒影：0-15px 18px-8px rgba（255,255,255,0.5）；
/*淡出*/
背景：线性梯度（到底部，rgba（255，255，255，0.65），透明，透明80%）；
/*绘制的光泽效果*/
过滤器：模糊（3px）；
/*增加一点模糊/光泽效果，optionnal*/
}
a{
弹性：1；
/*根据数量填写家长和共享房间*/
背景：继承；
/*以后将需要与pseudo混合*/
颜色：白色；
字母间距：1px；
文字装饰：无；
最小宽度：14em；
文本对齐：居中；
字体系列：“Oswald”，无衬线；
/*看起来很接近你的字体系列*/
文本阴影：2PX2PX2PX#222；
填充：1em；
右边距：-.8em；
/*将隐藏最后一个元素上的箭头*/
溢出：隐藏；
位置：相对位置；
/*将此设置为“粘贴箭头形状”*/
溢出：可见；
/*即使在父级之外，也让箭头显示*/
}
a:第一种{
左边距：-1米；
/*可选的*/
}
a:以后{
/*右箭头形状*/
内容：''；
位置：绝对位置；
填充：1.5em；
盒影：3px-3px-3px-rgba（255,255,255,0.5），5px-5px-6px-1px-rgba（0,0,0.5）；
变换：旋转（45度）；
右：-1em；
/*移到正方形以外*/
顶部：0.25em；
/*如果重置或更改了顶点填充或线条高度，请调整此选项*/
背景：继承；
/*与父母融为一体*/
z指数：1；
/*站在上面，但在光滑的东西下面*/
}
/*背景颜色可以修改*/
.完成{
背景：#FC0000；
}
a:呵呵