How to make a selection of a menu item in the form of an inverted house?

Question

css

Good day!
I've already broken my whole head: the designer drew the selection of the menu item as follows

. the cell size is not fixed, the image is used as the background. And on different menu items there are different degrees of creeping out:

What are the solutions so as not to lose quality and at the same time the height of the block does not jump? Thanks in advance

Answer 1

The background-size property will help you: 100% 100%; - the background is stretched over the container.
codepen.io/paulradzkov/pen/JdOBbg?editors=110

Answer 2

It's done the same way here.

Answer 3

triangle generator apps.eky.hk/css-triangle-generator