Simple split color

code × September 13, 2013

See the Pen Simple Split Color Element by Katy DeCorah (@katydecorah) on CodePen

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 20 x 20em 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 very 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 30 x 20em. Setting the box-sizing to border box allows the border to be included in the width/height of the element.

Static Google maps for Jekyll VSCO Cam logo