灵活带标题的倾斜图片

Eric Meyer 关于创建这一排倾斜图像的教程的最终结果非常优雅。 但它更注重过程而非结果（甚至没有真正的独立演示）。 Eric 非常出色地将其讲解成了一个思考过程。

我们最近做过类似的事情，只是我们的比较虚假/通用，而 Eric 的则是针对真实世界的设计。

• 这是一行盒子，所以使用 flexbox。 Eric 思考过 grid 是否会是一个更好或更好的选择，因为宽度是已知的，并且两者都可以进行调整以接受更多/更少的盒子。 我同意在这里很难做出决定。
• 由于正在操作图像尺寸，object-fit 是必须的，并且这里使用了不太常用的 object-position 来帮助确定焦点。
• 标题只是自然地被图像推到盒子的底部。
• 倾斜是使用 clip-path 完成的，但它涉及一些技巧。 盒子需要放大才能裁剪而不留空白，然后使用负边距拉到一起。 百分比被用于所有方面以保持灵活性。
• 仍然需要更多调整才能防止裁剪标题，然后还有更多巧妙设计位的可能性。

令人难过的是，这可能是 最后一次 我链接到 24 ways。