0

I am building navigation like this: http://jsfiddle.net/techydude/XZLDq/

I had help from other members to help me figure out how to build navigation with slanted edges, however the edges do not appear smooth. Does anyone know a way to straighten out the edges?

user1118321
  • 25,567
  • 4
  • 55
  • 86
TechyDude
  • 1,165
  • 3
  • 16
  • 24

1 Answers1

0

I fixed it with css3 skew. http://jsfiddle.net/XZLDq/5/

You could fix the first and last one with pseudo-elements, just like you did.

Alfred Larsson
  • 1,339
  • 1
  • 9
  • 16
  • I have another question if you don't mind. The edges are smooth when they have a solid color. When I set a gradient background using this generator: http://www.colorzilla.com/gradient-editor/ The slants are jagged again. I updated the jsfiddle, do you see what I'm talking about? http://jsfiddle.net/techydude/XZLDq/7/ – TechyDude Jun 01 '12 at 17:25
  • Found these resources. http://stackoverflow.com/questions/6492027/css-transform-jagged-edges-in-chrome and http://stackoverflow.com/questions/9235342/3d-css-transform-jagged-edges-in-firefox I can't get them to work. But it may be because my computer doesn't support 3d transforms – Alfred Larsson Jun 01 '12 at 23:08