JSFiddle - React, Tailwind, and code Playground

by Gregor Adams

HTML

<div id="foo">
    <div id="bar"></div>
    I am a pure css tooltip with a semi-transparent background and a black border. <br/>
    My width is static an my height is dynamic...
</div>

CSS

body{background:url('http://lorempixel.com/700/500/abstract/9/') no-repeat;}

#foo{
    height:auto;
    width:200px;
    background:rgba(0, 195, 0, 0.6);
    position:absolute;
    left:150px;
    top:150px;
    padding:10px;
    color:rgb(0,0,0);
    border: 2px solid rgba(0,0,0,0.6);
    border-bottom:0;
}
#foo:before{
    content:'';
    width:11px;
    heigth:0;
    border-bottom: 2px solid rgba(0,0,0,0.6);
    position:absolute;
    bottom:0;
    left:0;
    
}
#foo:after{
    content:'';
    width:179px;
    heigth:0;
    border-bottom: 2px solid rgba(0,0,0,0.6);
    position:absolute;
    bottom:0;
    right:0;
}
#bar{
    content: '';
    height:20px;
    width:20px;
    background: none;
    -webkit-transform: rotate(-45deg);
    position:absolute;
    bottom:-10px;
    left:15px;
    background-image:-webkit-linear-gradient(45deg, rgba(0, 195, 0, 0.6)40%, transparent 41%, transparent);
    z-index:1;
    border-left: 2px solid rgba(0,0,0,0.6);
    border-bottom: 2px solid rgba(0,0,0,0.6);
}