CSS Arrow Pointer Nodules using before and after pseudo selectors
/* Codepen - http://codepen.io/neilgee/pen/LxXJrE */
.content {
position: relative;
background: #20988f;
}
.content:after, .content:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.content:after {
border-top-color: #20988f;
border-width: 8px;
margin-left: -8px;
}