It’s very simple using the linear-gradient property and “magic corners”.
Gradients as Solid Colors
We’re used to thinking of linear-gradients as well..gradients. Colors that fade from one to another. But they can also be used for solid colors. If your “color-stop” positions both start and end at the same point, there’s no color blending in the middle, so you get two solid colors on both sides.
To the Corner
CSS gradients also have an angle option. So you could say
linear-gradient(45deg, blue, orange) and that will split your gradient at a nice 45 degree angle. But if your element is not a fixed width and height, this won’t go from corner to corner. Thanks to the MDN reference page, I saw that you can also specify
to <side-or-corner>, where <side-or-corner> is left/right top/bottom. So for our button example, as seen in the CodePen, is:
background: linear-gradient(to right bottom, #2f3441 50%, #212531 50%);
That’s it. As for old browser support, this does not work in IE9—which is why I give a regular solid background color before the gradient, so there is a fallback.