Published on
ABCD preview

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 modern browsers. It looks like we can’t create such design using CSS only, even for evergreen browsers, so I used 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.

See the Pen ABCD by Ivan Bogachev (@sfi0zy) on CodePen.

Related posts

Pet projects

Muilessium preview
16  3  5k+

Simple UI framework. RSCSS, REM-based sizes, fluid typography and other nice ideas. This website is powered by it.