JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<div class="circle"></div>
<div class="circle-2"></div>
<div class="weird-shape"></div>

CSS

* { margin: 0; padding: 0; } 
body { max-width: 320px; margin: 4em auto; } 
div { margin: 3em auto; }

.circle {
    width:4em;
    height:8em;
    background:red;
    position:relative;

}

.circle:after {
    float: left;
    content:"";
    background:black;
    width:8em;height:8em;
    border-radius: 100%;    
}

.circle-2 { 
    /* set the height 
       and width of the object */
    width:8em;
    height:8em;
    
    /* useless fallback */
    background-color:black;
    
    /* creating the illusion of two 
       distinct shapes with a simple 
       gradient */
    background-image: -webkit-radial-gradient(50% 50%, circle contain, black, black 100%,red 0%);
    background-image: -moz-radial-gradient(50% 50%, circle contain, black, black 100%,red 0%);
    background-image: -ms-radial-gradient(50% 50%, circle contain, black, black 100%,red 0%);
    background-image: -o-radial-gradient(50% 50%, circle contain, black, black 100%,red 0%);
    background-image: radial-gradient(50% 50%, circle contain, black, black 100%,red 0%);

    /* old syntax */
    border-radius: 0 8em 8em 0;
    /* better syntax */
    border-radius: 0 50% 50% 0;
}

.weird-shape { 
    height: 8em;
    width: 4em;
    background-image: -webkit-radial-gradient(100%, circle, #fff 4em, #f00 0);
    background-image: -moz-radial-gradient(100%, circle, #fff 4em, #f00 0);
    background-image: -ms-radial-gradient(100%, circle, #fff 4em, #f00 0);
    background-image: -o-radial-gradient(100%, circle, #fff 4em, #f00 0);
    background-image: radial-gradient(100%, circle, #fff 4em, #f00 0);

}

JavaScript

// http://forrst.com/posts/Creating_a_CSS_shape_question-JlU