JSFiddle - React, Tailwind, and code Playground

by Gregor Adams

HTML

<div id="foo">
    <div id="bar">
        <div id="bar-inside">I am inside the circle. and I have opacity 0.6
        </div>
    </div>
    my circle can't have opaque content
</div>

CSS

body{background:green;}

#foo{
    height:50px;
    width:250px;
    background:rgba(0, 0, 0, 0.6);
    position:absolute;
    left:150px;
    top:150px;
    color: #fff;
    padding:50px;
}

#bar{
    height:200px;
    width:200px;
    background-image: -webkit-linear-gradient(transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0)),
        -webkit-linear-gradient(0deg, transparent 50%, rgb(0, 0, 0) 50%, rgb(0, 0, 0));
    opacity: 0.6;
    -webkit-transform: rotate(180deg);
    border-radius:200px;
    position:absolute;
    background-size: 200px;
    top:-100px;
    left:-100px;
    color: #fff;
}

#bar-inside {
    -webkit-transform: rotate(180deg);
    position:absolute;
    top:0px;
    left:0px;
    padding:50px;

}