Html 需要帮助使用svg创建选项卡吗

我需要做一些看起来像的标签。起初，我尝试使用纯

css

，用边框技巧创建一个三角形，但制作灰色边框似乎是不可能的。我想用SVG来做这件事，但是我以前从来没有用过，我有点被卡住了。有人能给我指一下正确的方向吗。谢谢

.c-tabs{
背景：#fff；
边框：3px实心#e9e9e9；
}
.c-tabs：之后，
.c-tabs：之前{
显示：表格；
内容：“；
}
.c-tabs：之后{
明确：两者皆有；
}
.c-tabs\u项目{
浮动：左；
宽度：25%；
填充：22px0；
颜色：#0b5d98；
字体大小：12px；
文本转换：大写；
字体系列：nexaBlack，无衬线；
文本对齐：居中；
光标：指针；
位置：相对位置；
}
.c-tabs\uuu项目svg：第一种类型{
位置：绝对位置；
左：0；
排名：0；
}
.c-tabs\uuu项目svg：类型的最后一个{
位置：绝对位置；
右：-23px；
顶部：-2px；
底部：-2px；
}
//.c-tabs\u项目：之后{
//内容：''；
//位置：绝对位置；
//宽度：20px；
//身高：100%；
//排名：0；
//右：0；
//左边框：30px实心透明；
//边框顶部：30px实心透明；
//边框底部：30px实心透明；
//背景：#fff；
//z指数：2；
////盒影：0 3px$光底；
//    }
//.c-tabs\u项目：之前{
//内容：''；
//位置：绝对位置；
//身高：100%；
//宽度：20px；
//身高：100%；
//排名：0；
//右：0px；
//左边框：33px实心#e9e9e9；
//边框顶部：33px实心透明；
//边框底部：33px实心透明；
//z指数：1；
//    }
.c-tabs\u项目-激活{
背景#03bfd7；
颜色：#fff；
盒影：插入0 3px#03bfd7；
}
.c-tabs___项目--活动：之后{
左边框：30px实心#03bfd7；
}

帕苏尔1:sumar
第2部分：登记
帕苏尔3号：利夫拉
帕苏尔4:PLată

如果您的目标是使用SVG而不是CSS制作这些三角形，您可以在Sketch或Illustrator中制作它们，并将它们导出为SVG，然后导入到项目中

是关于如何使用Adobe Illustrator执行此操作的指南

是一个关于如何使用草图的guid

您的工作流程类似于：

步骤1-在Illustrator或草图中制作形状

步骤2-将形状导出到SVG代码

---

第3步-将SVG代码直接导入项目

SVG本质上只是另一种图像类型，这不是您想要的——您想要的是CSS解决方案。此外，要求寻找“svg的好课程”是非常主观和离题的。请复习“关于主题”的主题。好的，我们可以忘记svg课程。为什么SVG解决方案在这里不好？