Ivan Bogachev



ABCD

2020 / 01 / 17
ABCD

A couple of days ago I found an interesting question on Habr Q&A. A man asked how to create a design concept with HTML and CSS. It's a common question and the concept looked simple, but nobody knew how to create it. The thing is that sides of the triangles in this concept must be parallel on all screen sizes. I accepted the challenge and created a prototype for modern browsers. It looks like we can't create such a design using CSS only, even for evergreen browsers, so I used some JS to calculate the widths of the triangles based on the heights of the cards, but maybe somebody will invent a new CSS trick for this type of calculations one day.

The Pen by Ivan Bogachev (@sfi0zy).