Diamond with an outline

[doobie]

Hey ya’ll,

Been a while since I’ve posted here. Hope everyone is doing well.

Here’s a CSS problem to solve. I’d like to create the diamond shape in this image without using any images: http://i.imgur.com/zij396Z.jpg

I’ve gotten this far, but can’t think of a way to get the white or yellow outlines to work.

http://codepen.io/jacobdubail/pen/LciCJ

Any help is greatly appreciated!

-Jacob

[doobie]

Thanks ChrisP!

I didn’t think about using linear gradients. Great idea. I’ll refine it a bit and post back when I’ve got it.

-Jacob

[Kitty Giraudel]

If you’re not a big fan of using borders to make shapes, you can definitely do it with transform: skew().

[Paulie_D]

What’s wrong with using an image?

It’s not as though it’s going to be very large.

Sometimes, I think we get all caught up in what is possible in CSS etc without realising that, sometimes, the easiest answer is the obvious one.

[Kitty Giraudel]

I bet on challenge.

[Paulie_D]

True, but it has downsides with browser rendering (and re-rendering).

For something as simple as this, I still think an image is the way to go…especially as it’s something that is essentially a logo and would be required elsewhere as well (print materials etc?)

[dfogge]

just a heads up if you’re going to use skew, it’s been deprecated. instead use skewX and skewY.

[doobie]

Thanks for the great discussion, everyone.

This is mostly a challenge to myself. I can generally determine when an image is necessary (or a good idea). As this isn’t a logo or a re-used element, I wanted to try to create it using CSS. I don’t have any issue with using triangles, but couldn’t figure out how to get the white/yellow border without using a bunch of extra elements, which isn’t a big deal, I guess.

If anyone knows how to create this using skew(), I’d be really interested in reviewing. That’s one css3 property I haven’t used a whole lot.

Thanks again!

-Jacob

[Paulie_D]

I can get the basic shape with skew but I think more transforms/translates might be required.

http://codepen.io/Paulie-D/pen/mikEL

http://codepen.io/Paulie-D/pen/EyKld

[dfogge]

not 100% sure it will work. you’ll definitely need to experiment with the skew degrees to find the sweet spot, and then throw a rotate(45deg) on it.

[doobie]

Thanks guys!

Here’s the version I’m running with right now:
http://codepen.io/jacobdubail/pen/LciCJ

I’ll have to use an image fallback for .no-cssgradients, but this should work pretty well everywhere else.

-J

[doobie]

Okay, so that version above works great in Webkit, but not Gecko. FireFox 18 on Mac flips the diamond into an hourglass. Fun times. I’ll update again once I figure it out.

-Jacob

[Author]

Posts