Forums

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

Home Forums CSS Need help understanding clip-path polygon() syntax

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #252519
    IAmAdamTaylor
    Participant

    I’m using clip-path with polygon() to create a button with bevelled edges. See the CodePen below:

    http://codepen.io/AD_Taylor/pen/OpbdRB

    This is my first time using clip-path, so I got started with the bevel values from http://bennettfeely.com/clippy/

    The line I need help with is this (line 66 in the CodePen):

    clip-path: polygon(10px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 11px 100%, 0% calc(100% - 11px), 0% 10px);

    As you can see the values aren’t standardised, i.e., they aren’t 10px around each corner.

    This quirk came from testing with the Chrome inspector and tweaking the values until they looked good. However, when testing it in Safari, the right hand corners appear very thin.

    Is there anything I can do to fix this?

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