- This topic is empty.
September 29, 2015 at 1:37 am #208922
I’ve designed a webpage with some interesting looking buttons. A stripped back, basic example here:
The ‘shadow’ of the button is skewed in the mock-up, so it is thicker at one end than the other. In the example, the smaller button looks about right. The problem is, using CSS triangles with the border approach means you need to set a pixel width. So then the button is longer, the (shadow) border doesn’t expand width the button.
Anyone have any ideas?
I thought about saving the shadow out as an SVG, using
background-sizeto stretch it when a wider button is needed – but then the aspect of the shadow will change to. The good thing with the border approach is the left angle holds it’s shape when the width is increased.
It’s also worth noting the button(s) will be various different background colours and textures so flat images to use as a mask can’t really be used.
Hope someone can help and maybe come up with a better solution!
Cheers!September 29, 2015 at 3:14 am #208926
Yeah it’s a bit of a ballache (serves me right for designing them)!
:afterpseudo classes so that wouldn’t work anyways!
Tried messing about with box-shadow and gradient backgrounds but couldn’t get anywhere near the same result.September 29, 2015 at 6:25 am #208958
Closest I’ve been able to get it:
SVG background image that stretches. Due to the slanted nature of the buttons, it doesn’t look to bad that they’re at different angles due to the width. But ideally I would like to get it so they’re all the same.
Is there a way to anchor a point within and SVG? So the left side of the SVG was the same regardless of width? Or maybe that could be achieved using 2 polygons, the left triangle fixed, the right sided one scaling?
New to SVG’s so any advise on that would be welcome too :)
- The forum ‘CSS’ is closed to new topics and replies.