CSS样式导航元素

Question

我一直试图重新创建这个菜单已有一段时间，但现在只取得了一点成功。我对CSS没有经验，但这个问题让我感到难过。我试过检查页面，我似乎无法找到创建每个链接的“波浪”角落的秘密。非常感谢您提供的任何帮助。这是该网站的链接：

http://css-tricks.com

提前致谢，祝你好运！

Answer 1

CSS-TRICKS为每个标签使用内联SVG，颜色使用CSS设置。

这是克里斯本人的一个很好的介绍：http://css-tricks.com/using-svg/

以下是更详细的说明：https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes

Answer 2

他在这里使用SVG，如果你展开它，你可以看到根代码 <path id="shape-tab" d="M100,25C79.568,25,84.815,0,59.692,0H11.149C5.027,0,0,4.634,0,10.385V25"></path>

Answer 3

你总是可以尝试使用css-tricks的教程 http://css-tricks.com/tabs-with-round-out-borders/

Answer 4

Chris使用svgs来获得这些形状。

您还可以使用背景图像来实现相同的布局。创建一个精灵，其中包含第一个菜单项图像和后续菜单项图像的图像。制作菜单项position: relative并为它们提供z-index值，以便在每个菜单项上重叠。