<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.