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

克里斯使用svg来获得这些形状。

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