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:

1. Single HTML tag
2. No colored negative space, only transparent
3. Scale Good
4. No path
5. 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 } 

Final Result

Animated

This version also has as unit em where I am looking to switch for all the icons, better performance specially on animation.

For more please check the current icons on github and give it a ⭐ if you like it.

Would love to see your approach on this with as less CSS as possible.

AM