Ivan Bogachev

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 for this website and the concept looked simple, but nobody knew how to create it. The thing is the sides of the triangles in the concept must be parallel on all screen sizes, not only on fullhd. I accepted the challenge and created a prototype for the modern browsers. It looks like we can’t create such 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 someone will invent a new CSS trick for this type of calculations.

The Pen by Ivan Bogachev (@sfi0zy).