如何使用 HTML CSS 和 JavaScript 在导航菜单中制作弯曲的活动标签？
在本文中，我们将了解使用 HTML、CSS 和 Javascript 在导航菜单中使用的活动选项卡中的弯曲外部。导航菜单中最漂亮和好看的设计之一是“活动选项卡外部曲线”设计。借助 CSS 的border-radius 属性，制作内曲线非常容易。但是，在制作外部曲线时，它变得复杂。因此，我们将学习如何使用以下方法在导航菜单中使用 Html CSS 和 JavaScript 制作“活动选项卡中的弯曲外部”：
- 方法一：设计两个伪元素。
- 方法2：使用上面圆的box-shadow
外曲线：外曲线是圆形的外角，通过它我们将活动元素连接到文档的任何其他元素。让我们看一个例子：
我们将使用以下步骤制作“导航菜单中活动选项卡中的弯曲外部”：
使用活动选项卡制作导航菜单：
现在在进入“外部曲线”部分之前，我们将使用 HTML 和 CSS 创建一个简单的导航菜单，并按照以下步骤在导航菜单中创建一个默认活动项：
- 创建类导航的 div 元素。
- 在 div 中创建一个无序列表。
- 将您想要的图标和链接添加为无序列表的列表项。
- 为我们的默认活动项选择一个列表项。向该项目添加一个活动类。
- 添加自定义 CSS、背景和字体，使我们的导航更美观。
添加 JavaScript – 使活动选项卡在单击时可移动：
我们已经成功创建了一个带有活动标签的侧边导航栏。现在我们的任务是激活被点击的链接。在 JavaScript 和 jQuery 的帮助下，我们将按照以下步骤进行操作：
- 将 jQuery 库添加到我们的 HTML 文档中。
- 为导航菜单的所有列表项添加点击事件。
- 阻止默认以阻止恢复之前的状态。
- 在该函数中，从现有的活动列表项中删除“活动”类。
- 将“活动”类添加到单击的列表项。
方法一：设置两个伪元素的样式
- 在列表元素内的 标记顶部添加两个额外的 标记。这些将作为伪元素执行。
- 将“left-curve”类添加到第一个 标签，将“bottom-curve”添加到第二个 标签。
- 使用类 'left-curve' 的 标记在左侧创建一个矩形。
- 在选择器之前使用 css ::为此类的元素添加边框半径。
- 使左曲线的显示为“无”。
- 当链接处于活动状态时，使显示成为“块”。
- 对“右曲线”（第二个 标签）重复相同的过程。
例子 ：
HTML
Curved Outside Active Tab | Geeksforgeeks
HTML
Curved Outside Active Tab | Geeksforgeeks
输出 ：
方法2：使用上面圆的box-shadow
- 使用 ::before 和 ::after 选择器在活动链接的顶部和底部创建一个圆圈。
- 使用相同的参数创建圆的框阴影。
- 使圆形的颜色与导航栏的背景颜色相同，box-shadow的颜色与外部div的颜色相同。现在活动链接向外弯曲。
例子：
HTML
Curved Outside Active Tab | Geeksforgeeks
输出：
