Callout Arrow CSS

Trying to replicate callout graphic with CSS

by sundaramkumar

HTML

<div class="callout right">
    <div class="callout-inner">
        <div class="callout-content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>
</div>

CSS

.callout {
                position: relative;
                top: 0;
                left: 0;
                display: block;
                padding: 10px;
            }
            .callout.right {
                margin-left: 10px;
            }
            .callout.right::before {
                position: absolute;
                top: 10%;
                top: 10px;
                width: 0;
                height: 0;
                margin-top: -10px;
                border-top: 10px solid transparent;
                border-bottom: 10px solid transparent;
                border-right: 10px solid #a8c3e5;
                content: '';
            }
            .callout.right::after {
                position: absolute;
                top: 50%;
                left: 2px;
                width: 0;
                height: 0;
                margin-top: -10px;
                border-top: 10px solid transparent;
                border-bottom: 10px solid transparent;
                border-right: 10px solid #f9f9f9;
                content: '';
            }
            .callout-inner {
                padding: 2px;
                width: 240px;
                overflow: hidden;
                background: black;
                background: #a8c3e5;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
            }
            .callout-content {
                padding: 14px;
                margin: 0;
                background-color: #f9f9f9;
                color: #39569A;
                -webkit-border-radius: 2px;
                -moz-border-radius: 2px;
                border-radius: 2px;
                -webkit-background-clip: padding-box;
                -moz-background-clip: padding-box;
                background-clip: padding-box;
            }