<div class='speech-bubble'>Hello!</div>
body { background: dimgrey; perspective: 35em; }
.speech-bubble {
position: relative;
margin: .5em auto;
padding: 1em;
width: 10em; height: 4em;
border-radius: .25em;
transform: rotate(-4deg) rotateY(15deg);
background: #629bdd;
font: 2em/4 Century Gothic, Verdana, sans-serif;
text-align: center;
}
.speech-bubble:before, .speech-bubble:after {
position: absolute;
z-index: -1;
content: '';
}
.speech-bubble:after {
top: 0; right: 0; bottom: 0; left: 0;
border-radius: inherit;
transform: rotate(2deg) translate(.35em, -.15em) scale(1.02);
background: #f4fbfe;
}
.speech-bubble:before {
border: solid 0 transparent;
border-right: solid 3.5em #f4fbfe;
border-bottom: solid .25em #629bdd;
bottom: .25em; left: 1.25em;
width: 0; height: 1em;
transform: rotate(45deg) skewX(75deg);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.