JSFiddle - React, Tailwind, and code Playground

by Gregor Adams

HTML

<div id="foo">
    <div id="bar">
    </div>
</div>

CSS

body{background:white;}

#foo{
    height:150px;
    width:250px;
    position:absolute;
    left:40%;
    top:20%;
}

#bar{
    height:40px;
    width:40px;
    background-image: -webkit-linear-gradient(transparent 50%, green 50%, green),
        -webkit-linear-gradient(0deg, transparent 50%, green 50%, green);
    opacity: 1;
    -webkit-transform: rotate(40deg);
    border-radius:40px;
    position:absolute;
    background-size: 60px; 
    top:85px;
    left:-5px;
}
#bar:before{
    content:'';
    height:100px;
    width:100px;
    background: none;
    border-right: 5px solid green;
    opacity: 1;
    -webkit-transform: rotate(-65deg);
    border-radius:100px;
    position:absolute;
    top:-15px;
    left:-70px;
}
#bar:after{
    content:'';
    height:20px;
    width:20px;
    background: yellow;
    opacity: 1;
    -webkit-transform: rotate(-65deg);
    border-radius:100px;
    position:absolute;
    top:-5px;
    left:-70px;
    -webkit-box-shadow: 0 10px 0 red,
        0 -10px 0 red,
        -10px 0 0 red,
        10px 0 0 red;
}