css3 block with left arrow and shadows

css3 block with arrow and shadows

<style>
.b-map-popup {
    position: relative;
    background: #fefefe;
    border: 1px solid #fefefe;
    -webkit-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.3);
    box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.3);
    z-index:100;
}

.b-map-inner {
    background: #fff;
    padding:5px;
}

.b-map-popup:before {
    border: solid transparent;
    content: " ";
    position: absolute;
    pointer-events: none;
    top: 50%;
    left:-8px;
    margin-top: -9px;
    background: white;
    display: block;
    width: 9px;
    height: 9px;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.3);
}
</style>

<div class="b-map-popup">
    <div class="b-map-inner">
    "If the facts don't fit the theory, change the facts."
    - Albert Einstein
    "If the facts don't fit the theory, change the facts."
    - Albert Einstein
    "If the facts don't fit the theory, change the facts."
    - Albert Einstein
    "If the facts don't fit the theory, change the facts."
    - Albert Einstein
    </div>
</div>