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?