带边框的CSS自定义形状

我正在尝试制作一个带有标签的菜单。选项卡的样式如下所示：

我需要的背景是透明的，有一个边界，悬停时，它将填充另一种颜色的背景

我已经尝试使用纯CSS来实现这一点，我可以使用：before和：after来获得正确的形状，但是当我使用边框来实现这一点时，我不能在两侧添加边框，并最终得到以下结果：

#指针{
宽度：200px；
高度：40px；
位置：相对位置；
背景：红色；
文本对齐：居中；
边框：1px纯白；
}
#指针：在{
内容：“；
位置：绝对位置；
左：-20px；
底部：0；
宽度：0；
边缘底部：20px；
身高：0；
右边框：20px纯红；
边框顶部：0px实心红色；
边框底部：20px实心透明；
}
#指针：之前{
内容：“；
位置：绝对位置；
右：-20px；
底部：0；
宽度：0；
身高：0；
左边框：20px纯红；
边框顶部：20px实心透明；
边框底部：20px纯红；
}

---

选项卡1

对于复杂的SHPAE，最好使用

svg

我从您的问题中得到的是，svg区域/悬停区域比图中的要大。这是真的。但是您可以通过在svg中定位

路径

来解决这个问题，从而使您的样式磨砺

路径：悬停

我制作了一个小片段，以便您可以看到它是如何工作的

希望这有帮助：>

svg{
背景：红色；
}
svg：悬停{
背景：橙色；
}
路径：悬停{
填充：蓝色；
}

---

考虑到倾斜变换，这里有一个简单的想法：

.box{
宽度：200px；
高度：80px；
利润率：20px；
颜色：#fff；
z指数：0；
位置：相对位置；
--c:黑色；
--b:红色；
}
.box:悬停{
--b:蓝色；
--c:绿色；
}
.box:之前，
.盒子：之后{
内容：“；
位置：绝对位置；
z指数：-1；
左：0；
右：0；
身高：50%；
边框：3px实心变量（--c）；
背景：var（--b）；
框大小：边框框；
}
.盒子：以前{
排名：0；
变换：斜交（30度）；
变换原点：右下角；
边框底部：无；
}
.盒子：之后{
底部：0；
边界顶部：无；
}

一些文本