- This topic is empty.
February 4, 2013 at 7:47 pm #42478
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!
-JacobFebruary 5, 2013 at 1:28 am #123380
I didn’t think about using linear gradients. Great idea. I’ll refine it a bit and post back when I’ve got it.
-JacobFebruary 5, 2013 at 4:19 am #105687Kitty GiraudelParticipant
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 #123397
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 #123398Kitty GiraudelParticipant
I bet on challenge.February 5, 2013 at 5:26 am #123403
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 #123435dfoggeParticipant
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 #123468
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.
-JacobFebruary 5, 2013 at 2:16 pm #123475February 5, 2013 at 2:18 pm #123474dfoggeParticipant
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 #123478
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.
-JFebruary 5, 2013 at 3:15 pm #123482
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.
- The forum ‘CSS’ is closed to new topics and replies.