Balloon's Arrow CSS3

by denvdmj

HTML

<div class="c-4 testimonial-wrap">
    <div class="testimonial-inner">
        <p>Using Facebook was unquestionably the best decision I could possibly have made at the point in my journalistic journey. It enabled me to share my fears, frustrations as well as successes.</p>
    </div>
</div>

CSS

body {
    background: #eee
}
.testimonial-inner {
    background: #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 30px;
    display: block;
    margin-bottom: 25px;
    position: relative;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}
.testimonial-inner:after {
    top: 100%;
    left: 48px;
    border: solid transparent;
    content:" ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-top-color: #fff;
    border-width: 18px;
    margin-left: -18px;
}
.testimonial-inner:before {
    content: '';
    position: absolute;
    transform: rotate(45deg);
    width: 36px;
    height: 36px;
    bottom: -12px;
    z-index: -1;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}