Transform parent element to look concave, also transforming its children respectively

Question

I'm trying to achieve a concave transformation in css to look like these examples (only HUD):
_{(source: pke6.de)}

I already tried to use skew, however, a skew into 2 directions would be necessary, which does not exist.

Another attempt is to split the left and right side into seperate sections, transforming them separately (not shown on the screenshot). However even that didn't quite look like the bottom left HUD element on the 2nd screenshot.

Is there any way to accomplish such an effect?