CODEWITHSUNDEEP
htmlcss
Haden Hiles
Haden Hiles

Reputation: 107

CSS styling nav elements

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!

Upvotes: 0

Views: 84

Answers (4)

ramesh
ramesh

Reputation: 2477

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.

Upvotes: 0

thedevlpr
thedevlpr

Reputation: 1101

You could always try out the tutorials they have going at css-tricks as well http://css-tricks.com/tabs-with-round-out-borders/

Upvotes: 0

Jeffpowrs
Jeffpowrs

Reputation: 4540

enter image description hereCSS-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

Upvotes: 3

Josh Rutherford
Josh Rutherford

Reputation: 2723

He's using SVG here, if you expand it you can see the root code <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>

Upvotes: 2

Related Questions