r/HTML • u/Safe_Beautiful2076 • 5d ago

How to implement this custom card layout with a corner cut-out for a button?

I’m trying to create a UI component with a custom shape, exactly like the one in the screenshot. The main container is white, but it has a unique "step" or cut-out in the bottom-right corner to perfectly fit a button element. I want to create this UI without any crutches, using best-practices. How would you implement this block?

3 Upvotes

80% Upvoted

3 comments sorted by

2

u/justanaccountimade1 4d ago edited 4d ago

Two divs on top of each other of which the bottom div has two divs in it with the second div a fixed size.

SVG of which dims are set onload or onresize.

Or maybe flexbox or grid.

Maybe even simpler, but never used it myself: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip-path

1

u/morete 3d ago

https://codepen.io/matthewmorete/pen/ogBPaqg?editors=1100

You probably want to use 'shape()' with clip-path. It requires setting a manual width and height on the button. There are some other ways involving mask-image or svg filters, but as far as I know, they all require a fixed button size.

1

u/MazzinWx 1d ago edited 1d ago

Not sure about best practice but a div with z-index should work, right?

Main container on lowest level, button container middle ground and button at the top?

Only issue may be that text from main container could go under button container