Back to home prev next
CSS code

This design looked difficult to reproduce, and it was fairly involved. I decided to create two columns - one transparent and one filled, both with a curved border radius on the bottom. Then to connect them I created a triangular shape to fill in the empty space between the curves of the inner border-radii. Oh, and I made a thin rectangle to top the second column. I used the :before and :after pseudo-classes and the position property to arrange everything to look like one shape. I did a lot of tweaking the widths and positioning to try to match the design, but couldn't achieve a 100% match.

Check out my code