<div id="ribbon">Nice to see you.</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: 11px 32px;
  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 {
  position:absolute;
  color:#0675b3;
  font-size:20px;
  line-height:43px;
  top:22px;
  height:0;
  width:30px;
  bottom:-.5em;
  position:absolute;
  display:block;
  border: 28px solid #1eb2df;
  box-shadow:0px 1px 0px rgba(0,0,0,0.4);
  z-index:-2;
}

#ribbon:before {
  content:'\25E5';
  text-align:right;
  left:-42px;
  border-right-width:0;
  border-left-color:transparent;
  text-indent:12px;
}

#ribbon:after {
  content:'\25E4';
  right:-42px;
  border-left-width:0;
  text-indent:-12px;
  border-right-color:transparent;
}