<div id="ribbon">
		<span id="content">Hello There</span>
	</div>

@import url(https://fonts.googleapis.com/css?family=Patua+One);

*{margin:0px;padding:0px;}

html {
  	width:100%;
		height:100%;
		background:-webkit-radial-gradient(rgba(80,0,0,0.1) 0%, 
					rgba(80,0,0,0.2) 30%, rgba(21,11,1,0.9) 100% ),
		    		url('https://subtlepatterns.com/patterns/wood_pattern.png');
  text-align: center;
	}
	
#ribbon {
		padding: .34em 1em;
		margin: 0;
		margin-top: 5%;
		position:relative;
		color: #ffffff;
		font: 32px 'Patua One', sans-serif;
		text-align: center;
		letter-spacing:0.1em;
		text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
		box-shadow: inset 0px 1px 0px rgba(255,255,255,.3),
					inset 0px 0px 20px rgba(0,0,0,0.1),
					0px 1px 1px rgba(0,0,0,0.4);
		 background: -webkit-linear-gradient(top,#1eb2df, #17a7d2);
      display: inline-block;
	}
	
#ribbon:before, #ribbon:after {
		content: "";
		width:.2em;
		bottom:-.5em;
		position:absolute;
		display:block;
		border: .9em solid #1eb2df;
		box-shadow:0px 1px 0px rgba(0,0,0,0.4);
		z-index:-2;
	}
	
#ribbon:before {
		left:-1.35em;
		border-right-width: .75em;
		border-left-color:transparent;
	}
	
#ribbon:after {
		right:-1.35em;
		border-left-width: .75em;
		border-right-color:transparent;
	}
	
#content:before, #content:after {
		content:"";
		bottom:-.5em;
		position:absolute;
		display:block;
		border-style:solid;
		border-color: #0675b3 transparent transparent transparent;
		z-index:-1;
	}
	
#content:before {
	  left: 0;
	  border-width: .5em 0 0 .5em;
	}
	
#content:after {
	  right: 0;
	  border-width: .5em .5em 0 0;
	}