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?)
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.
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.
Last time I ran into this, I added a new -moz- vendor prefix with different angles after the pre-fix free linear gradient, and it worked just fine, but I'm sure that's not the proper way to handle it.
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
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
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
If you're not a big fan of using borders to make shapes, you can definitely do it with transform: skew().
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.
I bet on challenge.
@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.).
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?)
Yes, I agree with you for this.
just a heads up if you're going to use skew, it's been deprecated. instead use skewX and skewY.
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
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
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.
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
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
@doobie, See http://stackoverflow.com/questions/12868704/why-did-firefox-16-change-the-direction-of-my-linear-gradients
Last time I ran into this, I added a new
-moz-vendor prefix with different angles after the pre-fix free linear gradient, and it worked just fine, but I'm sure that's not the proper way to handle it.