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.
