JSFiddle - React, Tailwind, and code Playground

by Arhidiablo

HTML

<div class="sp">SitePoint Rocks!</p>
<div class="sp2">SitePoint Rocks!</p>

CSS

.sp {
    position: relative;
    width: 200px;
    height: 175px;
    text-align: center;
    line-height: 100px;
    background-color: #fff;
    border: 8px solid #666;
        -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    border-radius:0 150px 0 150px;
        -webkit-box-shadow: -2px 2px 4px #888;
    -moz-box-shadow: -2px 2px 4px #888;
    box-shadow: -2px 2px 4px #888;
}
.sp:before { 
    content: ' '; 
    position: absolute; 
    width: 0; 
    height: 0; 
    left: 158px; 
    top: 175px; 
    border: 25px solid; 
    border-color: #666 #666 transparent   transparent ; 
}
.sp:after { 
    content: ' '; 
    position: absolute; 
    width: 0; 
    height: 0; 
    left: 170px; 
    top: 175px; 
    border: 15px solid; 
    border-color: #fff #fff transparent transparent; 
}
.sp2 {
    position: relative;
    width: 200px;
    height: 175px;
    text-align: center;
    line-height: 100px;
    background-color: #fff;
    border: 8px solid #666;
        -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    border-radius: 150px 0 150px 0;
        -webkit-box-shadow: 2px 2px 4px #888;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 2px 2px 4px #888;
}
.sp2:before { 
    content: ' '; 
    position: absolute; 
    width: 0; 
    height: 0; 
    left: -8px; 
    top: 175px; 
    border: 25px solid; 
    border-color: #666 transparent transparent #666; 
}
.sp2:after { 
    content: ' '; 
    position: absolute; 
    width: 0; 
    height: 0; 
    left: 0px; 
    top: 175px; 
    border: 15px solid; 
    border-color: #fff transparent transparent #fff; 
}