CSS3 Price and Post Tag

This code editor is only for html, css and javascript. Edit code in left box and to see result, click =>

Code

<html>
<head>
<title>Post &anp; Price Tags CSS3</title>
<style type="text/css">
	.tags a {
		float: left;
		position: relative;
		width: auto;
		height: 30px;
		margin-left: 20px;
		padding: 0 12px;
		line-height: 30px;
		background: #1f8dd6;
		color: #fff;
		font-size: 18px;
		font-weight: 600;
		text-decoration: none;		
	}

.tags a:before {
		content: "";
		position: absolute;
		top: 0;		
		width: 0;
		height: 0;		
		border-style: solid;		
	}
	
	.tags a:after {
		content: "";
		position: absolute;
		top: 13px;
		width: 4px;
		height: 4px;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		background: #fff;
		-moz-box-shadow: -1px -1px 2px #004977;
		-webkit-box-shadow: -1px -1px 2px #004977;
		box-shadow: -1px -1px 2px #004977;
	}	
	
	.tags a:hover {
		background: #1d85ca;
	}	
	
	/* Add rounded corners to right end of the anchor tag */
	.price-tag a {		
		-moz-border-radius-bottomright: 4px;
		-webkit-border-bottom-right-radius: 4px;
		border-bottom-right-radius: 4px;
		-moz-border-radius-topright: 4px;
		-webkit-border-top-right-radius: 4px;
		border-top-right-radius: 4px;
	}
	
	/* Position and show only right border of triangle  */
	.price-tag a:before {		
		left: -15px;	
		border-color: transparent #1f8dd6 transparent transparent;
		border-width: 15px 15px 15px 0;
	}
	
	/* Fix the circle between anchor box and triangle left to it  */
	.price-tag a:after {		
		left: -2px;
	}
	
	.price-tag a:hover:before {
		border-color: transparent #1d85ca transparent transparent;
	}

/* Add rounded corners to left end of the anchor tag */	
	.post-tag a {		
		-moz-border-radius-bottomleft: 4px;
		-webkit-border-bottom-left-radius: 4px;
		border-bottom-left-radius: 4px;
		-moz-border-radius-topleft: 4px;
		-webkit-border-top-left-radius: 4px;
		border-top-left-radius: 4px;
	}
	
	/* Position right and show only left border of triangle  */
	.post-tag a:before {		
		right: -15px;	
		border-color: transparent transparent transparent #1f8dd6;
		border-width: 15px 0 15px 15px;
	}
	
	/* Fix the circle between anchor box and triangle right to it  */
	.post-tag a:after {		
		right: -2px;
	}
	
	.post-tag a:hover:before {
		border-color: transparent transparent transparent #1d85ca;
	}
</style>

</head>
<body>
	<span class="tags">
    	<span class="price-tag"><a href="javascript:void()">$100</a></span>
        <span class="post-tag"><a href="javascript:void()">Sample Text</a></span>
    </span>       
</body>
</html>