DEV Community

Astrit

Posted on Feb 7, 2020

Yin and yang - Pure CSS, transparent, single element icon

#css #webdev #html #opensource

As you might already know I have created recently css.gg a pure CSS Icon library.
So now on the v2 I am trying to add 200 more icons for a 700 total.

This library has some restrictions such as:

Single HTML tag
No colored negative space, only transparent
Scale Good
No path
No data-uri PNG or SVG

So everything is harder as if I would do it on multiple tags and not transparent.

So here is my approach.

Step 1

First I created as usual a circle with 2px border and note how I do not specify when not needed the color so it inherits from the parent, when is a must I use currentColor.

.gg-yinyang {
  box-sizing: border-box;
  position: relative;
  display: block;
  /* ^ this is only to contain the icon as box is applied on all icons */

  width: 20px;
  height: 20px;
  border: 2px solid;
  border-radius: 22px
}

Step 2

Now second step to create pseudo elements with half of the parent width minus the border and positioned center vertically. I do always fixed pixels to contain it and for better cross-browser support.


.gg-yinyang::after,
.gg-yinyang::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 10px;
  top: 4px
}

Step 3

The ::before pseudo selector needs to be on the left and with standard border

.gg-yinyang::before {
  border: 2px solid;
  left: 0
}

Step 4

Now comes the most challenging, tricky & ugly part where I cover the rest of the area with the box shadow of the ::after pseudo selector

.gg-yinyang::after {
  border: 2px solid transparent;
  right: 0;
  box-shadow:
    inset 0 0 0 4px,
    0 -3px 0 1px,
    -2px -4px 0 1px,
    -8px -5px 0 -1px,
    -11px -3px 0 -2px,
    -12px -1px 0 -3px,
    -6px -6px 0 -1px
}