Ribbon Style with CSS

<div class="ribbon">
   	<h2 class="ribbon-heading">Sale 70% OFF</h2>
</div>

.ribbon {
	font-size: 14px !important;
	width: 50%;  
	color: #fff;
	background: #e66060;
	text-align: center;
	padding: 1em 2em;
	margin: 2em auto 3em;
	position: relative;
}
.ribbon:before, .ribbon:after {
	content: "";
	position: absolute;
	display: block;
	bottom: -1.4em;
	border: 1.5em solid #ca4646;
	z-index: -1;
}
.ribbon:before {
	left: -2em;
	border-right-width: 2em;
	border-left-color: transparent;
}
.ribbon:after {
	right: -2em;
	border-left-width: 2em;
	border-right-color: transparent; 
}
.ribbon .ribbon-heading {
  margin: 0;
}
.ribbon .ribbon-heading:before, .ribbon .ribbon-heading:after {
	content: "";
	position: absolute;
	display: block;
	border-style: solid;
	border-color: #953131 transparent transparent transparent;
	bottom: -1em;
}
.ribbon .ribbon-heading:before {
	left: 0;
	border-width: 1em 0 0 1em;
}
.ribbon .ribbon-heading:after {
	right: 0;
	border-width: 1em 1em 0 0;
}