Why so square?

The below slanted boxes and textual content has been made with pure CSS and HTML. It is based on an effect I saw on blender.org, and I wanted to see if I could replicate the rotated and angled boxes my self.

Slanted <div> layout

This is the top div.
Lorem ipsum dolor sit amet, consectetur.

This is the middle div.
Excepteur sint occaecat cupidatat.
This is the bottom div.
Ut enim ad minim veniam, quis nostrud exercitation ullamco.
You can edit and try out this HTML in this codepen by following this link.

(♫ It’s hip to be … ♫)