CSS rect() responsive clipping configuration

Goal

Ensure that the clipping rectangle defined by clip-path: rect() scales proportionally with the element’s size while keeping the layout box unchanged.

Constraint/Uncertainty

The rect() function accepts only absolute length units; it does not natively accept percentages that refer to the element’s own width or height, and using viewport units can break proportionality when the element is not sized relative to the viewport.

What approaches can be used to define responsive clipping values without JavaScript? Can CSS custom properties combined with calc() reliably express percentages of the element’s box? How do browsers serialize rect() values when they contain calc() or variable references?