CSS样式导航元素

Question

I have been trying to recreate this menu for some time now only I have had little success. I am not inexperienced with CSS however this problem has left me stumped. I tried inspecting the page only I can't seem to find the secret to creating the "wavy" corners of each link. Any help you can give is much appreciated. Here is a link to the site:

http://css-tricks.com

Thanks in advance, and good luck!

Answer 1

CSS-TRICKS is using an inline SVG for each tab, the color is set using CSS.

Here is a good introduction by Chris himself: http://css-tricks.com/using-svg/

Here is a more detailed description: 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 has used svgs to attain those shapes.

You could also use background images to achieve the same layout. Create a sprite containing the images for the first menu-item image and the subsequent menu-item image. Make the menu items position: relative and provide them with a z-index values to overlap on each menu item.