Arrow Head with CSS and Pseudo Element

ArrowHeadWithPseudoElement

<style type="text/css">
	.profile{
		display: inline-block;
		padding: 10px;
		border:1px solid #ccc;
		border-radius: 2px;
		margin-top: 15px;
		position: relative;
	}
	.profile .name{
		margin: 0px;
		display: block;
		padding-bottom: 5px;
		margin-bottom: 3px;
		border-bottom: 1px dotted #ccc;
	}
	.profile::before{
		content: '';
		display: block;
		width: 0;
		height: 0;
		border: 10px solid transparent;
		border-bottom-color: #ccc ;
		border-top: 0px;
		position: absolute;
		top: -10px;
	}
</style>
<div class="profile">
	<p class="name">Pankaj Patel</p>
	<small><a href="http://github.com/pankajpatel">http://github.com/pankajpatel</a></small>
</div>