Chakra UIで平行四辺形を作る方法

結論

transform: skew　を使う。

実践

実際に書くとこんな感じになる。

<Box width={"50%"} transform={"skewX(-40deg)"} m={10} border="solid">
  <Text fontSize={"20px"}>こんな感じ</Text>
</Box>

中身は傾いてほしくない時

上記の例では、中のテキストまで傾いてしまっている。
これを改善するためには、テキストに逆の傾きを与えてあげれば良い。

 <Box width={"50%"} transform={"skewX(-40deg)"} m={10} border="solid">
        <Text fontSize={"20px"} transform={"skewX(40deg)"}>
          まっすぐ表示される〜
        </Text>
 </Box>

おまけ

サンプルを作ったので置いときます。