The skew() transform function has been deprecated for years and it was even removed from Firefox at a certain point (though it was reintroduced later for compatibility reasons). And the thing is, while skew(xdeg) is the same thing as skewX(xdeg), something like skew(xdeg, ydeg) is only reproducible with a matrix() transform now.

That doesn't mean you cannot get the same effect anymore though. You certainly can. Basically, the idea is that an isosceles triangle (two edges equal) is half a rhobus (4 edges, all of them equal, opposite edges also parallel, opposite angles equal). So you have a HTML element which is a rhombus shape (initially a square, made a rhombus by using transforms) and a child element inside it (or a pseudo, doesn't mattter) which is a rectangle, having one edge equal and overlapping a rhombus diagonal and the other dimension equal to at least half the other rhombus diagonal. And then you apply overflow: hidden on the rhombus shaped element.

There's a more detailed and visual explanation of that in my CSS Day talk (that part starts from 15:23 with explaining how to get a rhombus with transforms then how to get a triangle).

@thebabydino, thanks for the reply! I did not know about the deprecation of the skew() function. Thank you for sharing that video, it was more than informative. I wish I would've seen your keynote before creating this project, would've saved me time and number guessing.

Leave a CommentMarkdown supported.
Click @usernames to add to comment.

Rad

The

`skew()`

transform function has been deprecated for years and it was even removed from Firefox at a certain point (though it was reintroduced later for compatibility reasons). And the thing is, while`skew(xdeg)`

is the same thing as`skewX(xdeg)`

, something like`skew(xdeg, ydeg)`

is only reproducible with a`matrix()`

transform now.That doesn't mean you cannot get the same effect anymore though. You certainly can. Basically, the idea is that an isosceles triangle (two edges equal) is half a rhobus (4 edges, all of them equal, opposite edges also parallel, opposite angles equal). So you have a HTML element which is a rhombus shape (initially a square, made a rhombus by using transforms) and a child element inside it (or a pseudo, doesn't mattter) which is a rectangle, having one edge equal and overlapping a rhombus diagonal and the other dimension equal to at least half the other rhombus diagonal. And then you apply overflow: hidden on the rhombus shaped element.

There's a more detailed and visual explanation of that in my CSS Day talk (that part starts from 15:23 with explaining how to get a rhombus with transforms then how to get a triangle).

@thebabydino, thanks for the reply! I did not know about the deprecation of the skew() function. Thank you for sharing that video, it was more than informative. I wish I would've seen your keynote before creating this project, would've saved me time and number guessing.