I set out to fix that with augmented-ui.
All you have to do now (after including the CSS file (no js or images, etc)) is this: <button augmented-ui="bl-clip exe">...
From there, there's a bunch of options that are just CSS. (and there are several other options, not just a simple corner clip!) You can set the size of the clip, change the border on the element to anything, including images and gradients (which is nearly impossible when done the traditional way). You can give it a background inset a distance from the border, leaving a transparent gap (so it'll work over any background at all) and much more!
Here are the docs on the border: http://augmented-ui.com/docs/#--aug-border-bg (click show in codepen if you want to play with it, jsfiddle's post feature is currently down)
I made all this possible with the polygon feature of clip-path so full-support reaches over 91% of global web users. Check out the CSS behind it all here if you want to see CSS being used as a programming language: https://unpkg.com/augmented-ui/augmented.css
Aaaand this is all free to use in any project! Check it out on NPM, I'd really really love to see what you make with it: https://www.npmjs.com/package/augmented-ui
Happy to answer questions! <3 Get augmented! ;)
I guess there is a mistake in documentation on website. When I hover on --aug-tr, --aug-bl
The description says, Top-left, Bottom-right clip augs. I It should be Top-right Bottom-left.