JSFiddle - React, Tailwind, and code Playground

by Joe Young

HTML

<div class="oval-quotes">
   <p>Message</p>
</div>

CSS

.oval-quotes {
   position: relative;
   width: 200px;
   height: 75px;
   margin: 2em auto 10px;
   background: rgb(40, 156, 253);
   -webkit-border-top-left-radius: 10px 10px;
   -webkit-border-top-right-radius: 10px 10px;
   -webkit-border-bottom-right-radius: 10px 10px;
   -webkit-border-bottom-left-radius: 10px 10px;
   -moz-border-radius: 10px / 10px;
   border-radius: 10px / 10px;
}


/* creates smaller curve */

.oval-quotes p:before {
   content: "";
   position: absolute;
   z-index: -1;
   bottom: -30px;
   right: 55%;
   width: 180px;
   /* wider than necessary to make it look a bit better in IE8 */
   height: 60px;
   background: #fff;
   /* need this for webkit - bug in handling of border-radius */
   /* css3 */
   -webkit-border-bottom-right-radius: 40px 50px;
   -moz-border-radius-bottomright: 40px 50px;
   border-bottom-right-radius: 40px 50px;
   /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
   -webkit-transform: translate(-30px, -2px);
   -moz-transform: translate(-30px, -2px);
   -ms-transform: translate(-30px, -2px);
   -o-transform: translate(-30px, -2px);
   transform: translate(-30px, -2px);
}


/* creates larger curve */

.oval-quotes p:after {
   content: "";
   position: absolute;
   z-index: -2;
   bottom: -30px;
   right: 25%;
   height: 80px;
   border-right: 200px solid #ffed26;
   background: #ffed26;
   /* need this for webkit - bug in handling of border-radius */
   /* css3 */
   -webkit-border-bottom-right-radius: 200px 100px;
   -moz-border-radius-bottomright: 200px 100px;
   border-bottom-right-radius: 200px 100px;
   /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
   -webkit-transform: translate(0, -2px);
   -moz-transform: translate(0, -2px);
   -ms-transform: translate(0, -2px);
   -o-transform: translate(0, -2px);
   transform: translate(0, -2px);
   /* reduce the damage in FF3.0 */
   display: block;
   width: 0;
}