Create triangle shaped pointer/border on a horizontal line.

<style type="text/css">

.box {
background: #33b5e5;
width: 500px;
height: 80px;
position: relative;
}

.line {
height: 39px;
border-bottom: 2px solid white;
}

.triangle {
background: #33b5e5;
border: 2px solid white;
border-width: 2px 2px 0 0;
transform: rotate(-45deg);
position: relative;
left: 250px;
top: 28px;
width: 20px;
height: 20px;
}

</style>

<div class="box">
<div class="line">
<div class="triangle"></div>
</div>
</div>


Output :)