How to make such a template?

Question

css

What's the easiest way to do something like this using CSS? (we are talking about squares). When using transform, the text inside the blocks will also rotate, right? Grateful for any advice.

Answer 1

Ready version
Create blocks and change their slope, and inside we prescribe display: inline-block and the opposite transformation for the text so that it is even.

Answer 2

Make the square a pseudo element, and rotate it already.
As already correctly noted by Alexander A , if you apply the transformation to the text, it will be displayed a little ugly. However, there is no need to make a square from two triangles either.

Answer 3

Who Says the Web is Just for Squares ;-)

Answer 4

How about SVG? SVG-path In my opinion the most convenient way.

Answer 5

Nafig css transform
Hang on before and after
apps.eky.hk/css-triangle-generator (will even work in old ie)

Answer 6

You do it through transform, and then rotate the text by as much as the square and the text is aligned.

Answer 7

Rotate blocks of text the other way, also with transform