JSFiddle - React, Tailwind, and code Playground

by pomeh

HTML

<div></div>

CSS

/* demo for http://stackoverflow.com/q/25566775/827168 */

div {
    /* adjust the width of the container to adjust circle's overlap size and shape */
    width: 80px;
    height: 50px;
    /* for debug purpose only */
    border: solid blue 1px;

    background:
        /* draw the red circle */
        radial-gradient(red 0%, red 70%, transparent 70%, transparent 100%) 0 0,
        /* draw the green circle */
        radial-gradient(green 0%, green 70%, transparent 70%, transparent 100%) 0 0;
    /* the red on the left, the green on the right */
    background-position: top left, top right;

    /* you can make then bigger or smaller */
    /* but you have to change width size above too */
    background-size: 50px 50px;
    /* You want both circles to appears once only */
    background-repeat: no-repeat;

    /* you can try with other values too */
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode#Syntax */
    background-blend-mode: multiply;
}