Html CSS V形元素，li元素后有边框和阴影

我正在尝试创建带有边框和阴影的选项卡式内容

这和在问题上有点不同，因为我试图创建阴影。此外，选项卡的整个区域应可单击。基本上是

li

尝试1 使用方形框并旋转它，使其具有两个可见的边框宽度

我现在所拥有的：

打开/激活选项卡时我希望获得的内容（仅使用CSS）：

尝试2 在每个li元素后使用直角三角形。 将其放置在下一个li元素之前 在中间的白色填充处失败（可以用两li之间的边距固定），但无法找到阴影的可能解决方案

尝试3次 定位元素后的彩色直角三角形 将白色三角形放置在其后面和：下一个li元素之前。 这次阴影吓坏了我

所以基本上问题是下一个li元素的尾部和当前元素的V形阴影

在堆栈代码段中尝试的演示

。我的选项卡{
宽度：100%；
保证金：10px 0！重要；
显示器：flex；
溢出：隐藏；
位置：相对位置；
z指数：100；
填充顶部：10px；
}
.我的标签是李a{
填充：15px 20px 15px 50px；
背景:#ff5050；
显示：块；
高度：56px；
}
.李先生{
显示：块；
宽度：20%；
字体大小：1.1米；
保证金：0；
}
李：最后一个孩子：之后{
边框顶部：28px实心#fff；
左边框：28px实心透明；
右边距：0；
边框样式：实心；
右边界：0；
边框底部：28px实心#fff；
内容：''；
身高：0；
浮动：对；
利润上限：-56px；
转化：无；
宽度：0；
}
.我的标签：以后{
左边框：40px实心#ff5050！重要；
页边顶部：1px；
左边距：-2px；
}
李：以后{
右边距：-7px；
边框样式：实心；
边框宽度：4px4p0；
边框颜色：白色；
内容：''；
高度：43px；
浮动：对；
利润上限：-43px；
变换原点：中心-顶部；
变换：旋转（45度）；
宽度：43px；
}
.我的标签li.活动：之后{
-网络工具包盒阴影：8px 0px 4px-3px#090A09；
-moz盒阴影：8px 0px 4px-3px#090A09；
-o形盒阴影：8px 0px 4px-3px#090A09；
盒影：8px 0px 4px-3px#090A09；
}
.my tabs li.active{
边框底部：8px纯白；
}
.我的标签李{
-网络工具包盒阴影：0px 8px 4px-3px#090A09；
-moz盒阴影：0px 8px 4px-3px#090A09；
-o形盒阴影：0px 8px 4px-3px#090A09；
盒影：0px 8px 4px-3px#090A09；
}

这是一个现场演示，以满足您的需要

就在前面，有一些注释：

您需要像这样将文本包装在

div

中的箭头中：

选项卡1

，因为div是隐藏

：在
元素
框阴影之后。（要了解这一点，请尝试打开
div

您需要按降序设置它们的

z-index

，以便第一个隐藏第二个，依此类推。（我认为箭头不多，所以我猜测最多5个）

我添加了一个

：hover

过渡到

框阴影

，以便您可以查看如何执行此操作

会谈结束后，以下是真实情况：

ul{
列表样式：无；
填充：0；
保证金：0；
}
李{
显示：内联块；
背景#2980b9；
颜色：#fff；
位置：相对位置；
盒影：0.2px 3px 0 rgba（0,0,0,0.5）；
过渡：全部。3秒轻松；
光标：指针；
}
李：之后{
内容：“；
位置：绝对位置；
排名：0；
右图：-14px；
高度：26px；
宽度：26px；
背景：继承；
变换：translateY（6px）旋转（45度）；
盒影：2px1p3p0RGBA（0,0,0,0.5）；
过渡：全部。3秒轻松；
}
李：第n个孩子（1）{
z指数：5；
}
李：第n个孩子（2）{
z指数：4；
}
李：第n个孩子（3）{
z指数：3；
}
李：第n个孩子（4）{
z指数：2；
}
李：第n个孩子（5）{
z指数：1；
}
李：悬停{
盒影：0.2px1p0 rgba（0,0,0,0.3）；
}
李：之前：悬停{
盒影：2px1px1px0RGBA（0,0,0,0.3）；
}
李：很活跃{
背景：#c0392b；
}
李迪夫{
背景：继承；
填充：10px 20px；
位置：相对位置；
z指数：1；
}

表1
表2

如果您有时间，可以使用背景线性渐变和rgba颜色悬停在单个纹理上：

下面的代码片段示例：

.active {
  background: linear-gradient(-310deg, transparent 0.75em, rgba(0, 100, 255, 0.5) 0.75em) top left no-repeat, linear-gradient(125deg, transparent 0.5em, rgba(0, 100, 255, 0.5) 10px) bottom left no-repeat;
  background-size: 100% 50%, 100% 50%
}

ul{
背景：url(http://lorempixel.com/500/52/abstract/4);
溢出：隐藏；
边框底部：3倍纯色透明；
填充：0 3px 0；
边缘：1米；
背景剪辑：内容框；
}
ul：以前{
内容：''；
高度：1.9em；
显示：内联块；
右边框：纯白；
位置：相对位置；
垂直对齐：顶部；
}
李{
保证金：0；
填充：0；
列表样式类型：无；
}
李{
显示：内联块；
垂直对齐：顶部；
文本对齐：居中；
最小宽度：70px；
填充：0.25em 2em 0.25em 1.5em；
边框：2倍纯白；
边界权：无；
左边界：无；
}
李：以前{
内容：''；
填充：0.7em；
保证金：-0.25em-2.75em-0.5em-2em；
边框：纯白；
左边界：无；
边框底部：无；
浮动：对；
变换：旋转（45度）；
边界半径：2px；
/* ? */
}
李：第一种{
左边距：-1米；
}
.主动{
背景：线性渐变（-310deg，透明0.75em，rgba（0，100255，0.5）0.75em）左上角不重复，线性渐变（125deg，透明0.5em，rgba（0，100255，0.5）10px）左下角不重复；
背景尺寸：100%50%，100%50%；
盒影：0 2px 2px黑色；
}
.活动：之前{
背景：线性梯度（45度，透明56%，rgba（0100250.5）56