<html><head>
<html><head><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style type="text/css">
</style> </head><body> <br><div id="header" class="ribbon">
<h1><a>Pure CSS Ribbon Header</a></h1>
</div></body></html> #header h1 {
font-size: 28px;
font-weight: 300;
font-family: 'open sans';
line-height: 54px;
letter-spacing: 3px;
height: 56px;
margin: 0;
display: inline-block;
font-smoothing: antialiased;
white-space:nowrap;
}
#header a {
color:#fff;
text-decoration:none;
}
.ribbon {background-color:#16a085; /* bg color for center of ribbon */
border:3px solid #eee; /*border color for center of ribbon */
padding: 0 20px;
height: 56px;
display: inline-block;
position: relative;
margin-left: 56px;
margin-right: 56px;
}
.ribbon:before, .ribbon:after {
content: '.';
text-indent: -9999em;
height: 0;
width: 0;
border-style: solid;
border-width: 28px;
position: absolute;
left: -45px;
top: 10px;
display: block;
z-index: -1;
}
.ribbon:before {
border-color: #138a72 #138a72 #138a72 transparent; /*bg color for left side of ribbon */
}
.ribbon:after {
border-color: #138a72 transparent #138a72 #138a72; /* bg color for right side of ribbon */
right: -45px;
left: auto;
}