css box mũi tên không sử dụng ảnh

Tham khảo link http://cssarrowplease.com/

//css style

.arrow_box {
position:relative;
background:#88b7d5;
border:4px solid #c2e1f5;
}

.arrow_box:after,.arrow_box:before {
left:100%;
top:50%;
border:solid transparent;
content:" ";
height:0;
width:0;
position:absolute;
pointer-events:none;
}

.arrow_box:after {
margin-top:-30px;
border-color:rgba(136,183,213,0) rgba(136,183,213,0) rgba(136,183,213,0) #88b7d5;
border-width:30px;
}

.arrow_box:before {
margin-top:-36px;
border-color:rgba(194,225,245,0) rgba(194,225,245,0) rgba(194,225,245,0) #c2e1f5;
border-width:36px;
}

//html

<div class="arrow_box">

    <h1 class="">css arrow please!</h1>

</div> 

See the Pen wBEmzo by Dinh (@DinhTrieu) on CodePen.