The effect is achieved on a single element using the properties border and box-sizing.
The border, only manipulating one side, must be half of the element’s width for a vertical split. For a horizontal split the border must be half of the element’s height.
In the example, the circle is
20em wide and has a border left width of
10em. I set the border color to white with a really low alpha (rgba) so that the border would pick up the color of the background, but add a light white on top.
Universally, I set the box-sizing to border box. If I didn’t set the box-sizing, then my shape would be warped with dimensions of
30em width and
20em height. Setting the box-sizing to border box allows the border to be included in the width/height of the element.
Did you enjoy this post? Support SisterSong. SisterSong strengthens and amplifies the collective voices of indigenous women and women of color to achieve reproductive justice by eradicating reproductive oppression and securing human rights.