Diamond with an outline
# February 4, 2013 at 7:47 pm
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.
Any help is greatly appreciated!
-Jacob# 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 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.
You must be logged in to reply to this topic.