JSFiddle - React, Tailwind, and code Playground

HTML

<div>This is Sparta!<span></span></div>

CSS

body{
    background:url('http://visualliteracyksu2010.files.wordpress.com/2010/10/wpid-paper_texture.jpg') no-repeat;
}
div{
    position:relative;
    width:106px;
    height:106px;
    padding:22px;
    background:green;
    border-radius:150px;
}
div:after{
    content:''; 
    position:absolute;
    top:0;
    left:0;
    height:150px;
    width:150px;
    clip:rect(96px, auto, auto, auto);
    background:red;
    border-radius:100%;
    -o-transform:rotate(-45deg);
}
div:before{
    content:'';
    position:absolute;
    top:22px;
    left:22px; 
    height:400px;
    width:400px;
    clip:rect(auto, 90px, 118px, 0px);
    background:red;
    border-radius:400px;
}
div span{
    position:absolute;
    display:block;
    top:22px;
    left:22px; 
    height:400px;
    width:400px;
    clip:rect(0, 118px, 90px, auto);
    background:red;
    border-radius:400px; 
}