Give help. Get help.

  • # February 4, 2013 at 7:47 pm

    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:

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

    Any help is greatly appreciated!


    # February 5, 2013 at 1:28 am

    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.


    # February 5, 2013 at 4:19 am

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

    # February 5, 2013 at 4:48 am

    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.

    # February 5, 2013 at 4:54 am

    I bet on challenge.

    # February 5, 2013 at 5:26 am

    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?)

    # February 5, 2013 at 8:16 am

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

    # February 5, 2013 at 12:53 pm

    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!


    # February 5, 2013 at 2:16 pm

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

    # February 5, 2013 at 2:18 pm

    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.

    # February 5, 2013 at 2:52 pm

    Thanks guys!

    Here’s the version I’m running with right now:

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


    # February 5, 2013 at 3:15 pm

    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.


Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.