Grow your CSS skills. Land your dream job.

Diamond with an outline

  • # 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: 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

    # February 4, 2013 at 8:57 pm

    The text could be positioned with a diff technique, but here’s with linear gradients..extremely rough, so you might have to adjust the stops

    http://codepen.io/ChrisPlz/pen/rCdxm

    # 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.

    -Jacob

    # 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:21 am

    @Paulie_D There is an upside to using CSS when you can though: it’s way easier to modify if need be (color, size, etc.).

    # 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 6:44 am

    Yes, I agree with you for this.

    # 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!

    -Jacob

    # February 5, 2013 at 2:16 pm

    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

    # 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:
    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

    # 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.

    -Jacob

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".