css - 将父元素变换为凹形，同时也分别变换其子元素

Question

我正在尝试在 css 中实现凹形转换，使其看起来像这些示例（仅 HUD）：

我已经尝试过使用 skew，但是，需要向 2 个方向倾斜，这是不存在的。

另一种尝试是将左侧和右侧分成单独的部分，分别转换它们（屏幕截图中未显示）。然而，即使这样看起来也不像第二张截图中左下角的 HUD 元素。

有什么办法可以达到这样的效果吗？