Elements with "Cut Corners" Design (Buttons & Divs)

[rokasjrokas (Rokas Judickas)]

Hello legends,

I’m currently working on a futuristic/cyberpunky looking web project and ran into a particular design problem.

As you can see in the attached photo below, the design contains a card and a button that are custom shaped (have cuts on the corners). And the problem I’m having is that I don’t really know how to implement this design into the web and scale it appropriately.

At this point, I’m just using the PNGs as the custom shaped backgrounds with 100% width and height properties, but the problem with this solution is that these visuals are still pixel-based, don’t scale beautifully and cannot customize them. If the height of the card changes, those cut corners become stretched and look like crap.

Maybe you have any suggestions or recommendations on how I can make some UI components custom-shaped and scale them properly? Perhaps there is a way to bypass it with some CSS rules?

Thanks in advance!

[rokasjrokas (Rokas Judickas)]

I think I found a solution:

Basically you can set a background to any linear-gradient and make it 45 deg. Then, you create a gradient with 4 points. The trick is that there is an instant colour change which make an illusion of a cut.

For this instance, my gradient looks like this:
#FF6969 | 0% opacity | 5% location
#FF6969 | 100% opacity | 5% location
#FF3D67 | 100% opacity | 95% location
#FF3D67 | 0% opacity | 95% location

And the best part is that you don’t even need to custom code!

Let me know if you have any other solutions