Using CSS Shapes in Your Designs

After reading this post on Nettuts+ I was bored at work today so I started playing with CSS ..

Long story short, It’s nothing groundbreaking but I figured it might prove useful to someone.

Check it out here: http://www.vagrantradio.com/demos/css_arrows/

You don’t have permission to access /demos/css_arrows/ on this server.You don’t have permission to access /demos/css_arrows/ on this server.

Didn’t have problem accessing it…

It would be nice if webkit rendered angles as nicely as mozilla does… too much jaggedness in the edges for my taste… I’m sure IE probably looks just as bad… browsers still have a way to go before using CSS for things such as these… at least IMO …

Doesn’t look jagged at all. I like it. I’m not seeing how it’s actually being made with those angles, though. Looking at the code it looks like you’re using border, but did you forget to post the code for the ‘arrows’ class? Or was that just there for show? Forgive me if I’m missing something, I just woke up.

@Uniq I have certain parts of Europe blocked by IP because of a certain content harvester that hits my site quite regularly, sorry about that.

@luckykind yes, the angles are quite jagged in IE and webkit unfortunately.

@Jar it’s just using border and the arrows class is for the jQuery fadein/fadeout.

Doesn’t look jagged at all.

What browser did you view it in?

Doesn’t look jagged at all.

What browser did you view it in?

It looks good in FF, everything else looks jagged. Regardless, it killed a couple of hours at work. lol.

Doesn’t look jagged at all.

What browser did you view it in?

It looks good in FF, everything else looks jagged. Regardless, it killed a couple of hours at work. lol.

It doesn’t look jagged in Chrome to me.

@VagrantRadio: Nice arrows, looks really good!

I looked at it in Chrome and FF.

I’m on a Mac… Chrome just came out of beta… but it still looks jagged on it and the same for Safari…

On Chrome:

It’s the same for Jeffrey’s tut as well…

not saying it’s not worth playing around with… just saying most of us are probably designers first and designers don’t like jagged edges… I’m assuming…