Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Responsive CSS triangle width (width: 100%, essentially)

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #208922
    grimski
    Participant

    Hi there,

    I’ve designed a webpage with some interesting looking buttons. A stripped back, basic example here:

    http://codepen.io/anon/pen/meONLa

    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-size to 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!

    #208926
    grimski
    Participant

    Yeah it’s a bit of a ballache (serves me right for designing them)!

    Using the border approach, the only thing I could think to do was get the width of the button with javascript and set it inline …but I’m using the :before and :after pseudo 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.

    #208958
    grimski
    Participant

    Closest I’ve been able to get it:

    http://codepen.io/moy/pen/xwgbqr

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.