html - 如何为剪辑路径设置绝对值：css中的多边形？

Question

我想用 TailwindCSS 创建一个响应式消息气球。

我正在使用剪辑路径：多边形来制作形状。但是形状的值使用相对值然后当我改变宽度时我的形状变得不正确。

我创建了两个形状，因为我需要渐变边框。

我的预期：

响应时出错：

我希望它保持下图中的形状（我不知道如何称呼它）是绝对的，响应时它不会改变但形状的宽度可以改变。

这是我的代码：https ://play.tai​​lwindcss.com/P5nKIREryg

标签： htmlcsstailwind-css