This post contains a total of 12+ CSS Ribbon Examples with Source Code. All these Ribbons are made using CSS.
You can use the source code of these examples with credits to the original owner.
Related Posts
CSS Ribbon Examples
1. Pure CSS Ribbon
Made by Jeff Powers. Source


<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
@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;
}
</style>
</head>
<body>
<div id="ribbon">
<span id="content">Hello There</span>
</div>
</body>
</html>
2. Pure CSS Corner Ribbon
Made by Anthony Collurafici. Source


<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
background: #ccc;
}
/* ----- White Block ---------------------------------------*/
#corner-ribbon > div {
display : block;
background : white;
height : 200px;
width : 200px;
box-shadow : 0px 1px 5px 0px rgba(0,0,0,0.7);
-webkit-box-shadow : 0px 1px 5px 0px rgba(0,0,0,0.7);
position : relative;
top : 50px;
left : 50%;
margin-left : -100px;
}
/* ----- Ribbon Container ---------------------------------------*/
#corner-ribbon > div > div {
background : transparent;
height : 200px;
width : 200px;
position : absolute;
top : -10px;
left : 10px;
overflow : hidden;
}
/* ----- Top Curl ---------------------------------------*/
#corner-ribbon > div > div:before {
content : "";
display : block;
-webkit-border-radius : 10px 10px 0px 0px;
border-radius : 10px 10px 0px 0px;
width : 50px;
height : 10px;
position : absolute;
right : 86px;
background: rgb(0,138,59); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iIzAwOGEzYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ1JSIgc3RvcC1jb2xvcj0iIzBmMzMwYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(left, rgba(0,138,59,1) 1%, rgba(15,51,10,1) 45%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(0,138,59,1)), color-stop(45%,rgba(15,51,10,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(0,138,59,1) 1%,rgba(15,51,10,1) 45%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(0,138,59,1) 1%,rgba(15,51,10,1) 45%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(0,138,59,1) 1%,rgba(15,51,10,1) 45%); /* IE10+ */
background: linear-gradient(to right, rgba(0,138,59,1) 1%,rgba(15,51,10,1) 45%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008a3b', endColorstr='#0f330a',GradientType=1 ); /* IE6-8 */
}
/* ----- Right Curl ---------------------------------------*/
#corner-ribbon > div > div:after {
content : "";
display : block;
-webkit-border-radius : 0px 10px 10px 0px;
border-radius : 0px 10px 10px 0px;
width : 10px;
height : 50px;
position : absolute;
right : 0px;
top : 85px;
background: rgb(15,51,10); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9IiMwZjMzMGEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5OSUiIHN0b3AtY29sb3I9IiMwMDhhM2IiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(15,51,10,1) 55%, rgba(0,138,59,1) 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(55%,rgba(15,51,10,1)), color-stop(99%,rgba(0,138,59,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(15,51,10,1) 55%,rgba(0,138,59,1) 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(15,51,10,1) 55%,rgba(0,138,59,1) 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(15,51,10,1) 55%,rgba(0,138,59,1) 99%); /* IE10+ */
background: linear-gradient(to bottom, rgba(15,51,10,1) 55%,rgba(0,138,59,1) 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f330a', endColorstr='#008a3b',GradientType=0 ); /* IE6-8 */
}
/* ----- Ribbon ---------------------------------------*/
#corner-ribbon > div > div > div {
width : 200px;
height : 40px;
position : relative;
top : 30px;
right : -50px;
z-index : 1;
overflow : hidden;
transform :rotate(45deg);
-ms-transform :rotate(45deg); /* IE 9 */
-moz-transform :rotate(45deg); /* Firefox */
-webkit-transform :rotate(45deg); /* Safari and Chrome */
-o-transform :rotate(45deg); /* Opera */
box-shadow : inset 0px 0px 0px 3px rgb(0,114,45),inset 0px 0px 0px 4px rgba(0,0,0,0.5),inset 0px 0px 0px 5px rgba(255,255,255,0.4), 0px 21px 5px -18px rgba(0,0,0,0.8);
-webkit-box-shadow : inset 0px 0px 0px 3px rgb(0,114,45),inset 0px 0px 0px 4px rgba(0,0,0,0.5),inset 0px 0px 0px 5px rgba(255,255,255,0.4), 0px 21px 5px -18px rgba(0,0,0,0.8);
background: rgb(0,114,45); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNzIyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzAwOGEzYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDU2MWMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgba(0,114,45,1) 0%, rgba(0,138,59,1) 51%, rgba(0,86,28,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,114,45,1)), color-stop(51%,rgba(0,138,59,1)), color-stop(100%,rgba(0,86,28,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(0,114,45,1) 0%,rgba(0,138,59,1) 51%,rgba(0,86,28,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(0,114,45,1) 0%,rgba(0,138,59,1) 51%,rgba(0,86,28,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(0,114,45,1) 0%,rgba(0,138,59,1) 51%,rgba(0,86,28,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(0,114,45,1) 0%,rgba(0,138,59,1) 51%,rgba(0,86,28,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00722d', endColorstr='#00561c',GradientType=1 ); /* IE6-8 */
}
/* ----- Top Glare ---------------------------------------*/
#corner-ribbon > div > div > div:before {
content : "";
display : block;
height : 72px;
width : 13px;
position : relative;
top : -13px;
left : 27px;
transform : rotate(45deg);
-ms-transform : rotate(45deg);
-moz-transform : rotate(45deg);
-webkit-transform : rotate(45deg);
-o-transform : rotate(45deg);
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjYiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(left, rgba(255,255,255,0) 1%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.6)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 1%,rgba(255,255,255,0.6) 50%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,0) 1%,rgba(255,255,255,0.6) 50%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,0) 1%,rgba(255,255,255,0.6) 50%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(255,255,255,0) 1%,rgba(255,255,255,0.6) 50%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-8 */
}
/* ----- Right Clear ---------------------------------------*/
#corner-ribbon > div > div > div:after {
content : "";
display : block;
height : 72px;
width : 13px;
position : relative;
bottom : 90px;
left : 154px;
transform : rotate(45deg);
-ms-transform : rotate(45deg);
-moz-transform : rotate(45deg);
-webkit-transform : rotate(-45deg);
-o-transform : rotate(45deg);
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjYiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(left, rgba(255,255,255,0) 1%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.6)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 1%,rgba(255,255,255,0.6) 50%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,0) 1%,rgba(255,255,255,0.6) 50%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,0) 1%,rgba(255,255,255,0.6) 50%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(255,255,255,0) 1%,rgba(255,255,255,0.6) 50%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-8 */
}
</style>
</head>
<body>
<div id="corner-ribbon">
<div>
<div>
<div></div>
</div>
</div>
</div>
</body>
</html>
3. Responsive Rounded Ribbon
Made by Diego Pardo. Source


<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
/*almost everything here is em based*/
@import url(https://fonts.googleapis.com/css?family=Crete+Round);
html{
font-size:1em;
background: #825582;
}
h1, h2 {
font-family: 'Crete Round', serif;
}
a{
color: #825582;
text-decoration: none;
}
.content{
background:#e6e2c8;
width: 80%;
max-width: 960px;
min-height: 3.750em;
margin: 2em auto;
padding: 1.250em;
border-radius: 0.313em;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.5);
line-height: 1.5em;
color: #292929;
}
.ribbon{
position:relative;
padding: 0 0.5em;
font-size:2.000em;
margin: 0 0 0 -0.625em;
line-height: 1.875em;
color: #e6e2c8;
border-radius: 0 0.156em 0.156em 0;
background: rgb(123, 159, 199);
box-shadow: -1px 2px 3px rgba(0,0,0,0.5);
}
.ribbon:before, .ribbon:after{
position:absolute;
content: '';
display: block;
}
.ribbon:before{
width: 0.469em;
height: 100%;
padding: 0 0 0.438em;
top:0;
left: -0.469em;
background:inherit;
border-radius: 0.313em 0 0 0.313em;
}
.ribbon:after{
width: 0.313em;
height: 0.313em;
background: rgba(0,0,0,0.35);
bottom: -0.313em;
left: -0.313em;
border-radius: 0.313em 0 0 0.313em;
box-shadow: inset -1px 2px 2px rgba(0,0,0,0.3);
}
@media (max-width: 600px) {
body{
font-size:0.875em;
}
.ribbon{
line-height: 1.143em;
padding: 0.5em;
}
.ribbon:before, .ribbon:after{
font-size: 0.714em;
}
}
</style>
</head>
<body>
<div class="content">
<h1 class="ribbon">Just a Rounded Ribbon</h1>
<h2>Text</p>
</div>
</body>
</html>
4. Green Corner Ribbon
Made by Chris Coyier. Source


<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
body {
background: #eee;
}
.wrapper {
margin: 50px auto;
width: 80%;
height: 370px;
background: white;
border-radius: 10px;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 90;
}
.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -2px;
right: -2px;
}
.ribbon-green {
font-weight: bold;
font-family: Sans-Serif;
color: #333;
font-size: 15px;
text-align: center;
text-shadow: white 0px 1px 0px;
transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 13px;
width: 120px;
background: -webkit-gradient(
linear,
left top,
left bottom,
from(#bfdc7a),
to(#8ebf45)
);
color: #6a6340;
box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.3);
}
.ribbon-green:before,
.ribbon-green:after {
content: "";
/* Colour of the triangle. To flip the effect, use border-bottom. */
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position: absolute;
bottom: -3px; /* +1 to compensate for the border */
}
.ribbon-green:before {
left: 0px;
}
.ribbon-green:after {
right: 0px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="ribbon-wrapper-green">
<div class="ribbon-green">NEWS</div>
</div>
</div>
</body>
</html>
5. CSS Ribbon
Made by Simon Coudeville. Source


<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
html,
body {
height: 100%;
width: 100%;
}
body {
font: 150%/1.5 "Times New Roman", times, serif;
background: #192238;
text-align: center;
}
.row {
display: table;
width: 100%;
height: 100%;
margin: auto;
}
.block {
display: table-cell;
width: 100%;
vertical-align: middle;
position: relative;
}
h1 {
position: relative;
display: inline-block;
font-family: "Times New Roman", times, serif;
font-weight: 500;
letter-spacing: 0.15em;
white-space: nowrap;
text-align: center;
font-size: 1em;
text-transform: uppercase;
}
h1:after, h1:before {
content: " ";
display: block;
position: absolute;
bottom: -.5em;
width: 1em;
height: 100%;
background-color: #69c48d;
pointer-events: none;
}
h1:after {
right: -.57em;
z-index: -1;
}
h1:before {
bottom: auto;
top: -.5em;
left: -.57em;
z-index: -1;
}
h1 span {
display: inline-block;
position: relative;
padding: .15em .75em;
text-decoration: none;
color: #192238;
background-color: #8ed2a9;
}
h1 span:after, h1 span:before {
content: " ";
display: block;
position: absolute;
width: 0;
height: 0;
bottom: -.5em;
left: -.05em;
pointer-events: none;
-webkit-mask: none;
}
h1 span:before {
bottom: auto;
top: -.5em;
border-bottom: 0.5em solid #398e5b;
border-left: .5em solid transparent;
}
h1 span:after {
left: auto;
right: -.05em;
border-top: 0.5em solid #398e5b;
border-right: .5em solid transparent;
}
</style>
</head>
<body>
<div class="row">
<div class="block">
<h1>
<span>EST MMXIII</span>
</h1>
</div>
</div>
</body>
</html>
6. CSS Flat Button Shapes
Made by Charlotte Dann. Source


<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
margin: 0;
font-family: Open Sans, sans-serif;
font-size: 20px;
text-align: center;
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlYzhkZSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZThiNWRiIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZWVjOGRlIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #eec8de), color-stop(50%, #e8b5db), color-stop(100%, #eec8de));
background: -moz-linear-gradient(left, #eec8de, #e8b5db 50%, #eec8de);
background: -webkit-linear-gradient(left, #eec8de, #e8b5db 50%, #eec8de);
background: linear-gradient(to right, #eec8de, #e8b5db 50%, #eec8de);
}
html {
min-height: 100%;
}
#content {
width: 160px;
margin: 25px auto;
}
aside {
margin: 20px 0;
line-height: 34px;
position: relative;
cursor: pointer;
user-select: none;
}
aside:hover {
top: -1px;
}
aside:active {
top: 1px;
}
aside.ribbon {
background-color: #7DE3C8;
}
aside.ribbon:before, aside.ribbon:after {
top: 5px;
z-index: -10;
}
aside.ribbon:before {
border-color: #53dab6 #53dab6 #53dab6 transparent;
left: -25px;
border-width: 17px;
}
aside.ribbon:after {
border-color: #53dab6 transparent #53dab6 #53dab6;
right: -25px;
border-width: 17px;
}
aside:before, aside:after {
content: '';
position: absolute;
height: 0;
width: 0;
border-style: solid;
border-width: 0;
}
</style>
</head>
<body>
<div id='content'>
<aside class='ribbon'>Ribbon</aside>
</div>
</body>
</html>
7. CSS Ribbon Product Badges
Made by Taylor Jones. Source


<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body {
background: #333333;
}
body .wrap {
width: 100%;
margin: 0 auto;
}
body span {
color: white;
font-weight: bold;
font-size: 2em;
text-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
margin: 0.5em 0 0 0.5em;
display: block;
}
.ribbon {
line-height: 0.8em;
font-size: 2em;
text-transform: uppercase;
text-align: center;
font-weight: bold;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.15);
letter-spacing: -2px;
display: block;
width: 6rem;
height: 4rem;
background: linear-gradient(to bottom, #999999 0%, #cccccc 100%);
color: white;
margin: 1em 0.5em 0;
float: left;
padding-top: 1rem;
position: relative;
-webkit-filter: drop-shadow(0 0.5rem 0.3em rgba(0, 0, 0, 0.5));
transform: translate3d(0, 0, 0);
}
.ribbon:after {
content: "";
width: 0;
height: 0;
border-right: 3rem solid transparent;
border-left: 3rem solid transparent;
border-top: 1.5rem solid #CCCCCC;
position: absolute;
top: 5rem;
left: 0;
}
.ribbon.ribbon--red {
background: linear-gradient(to bottom, #d3362d 0%, #e57368 100%);
}
.ribbon.ribbon--red:after {
border-top: 1.5rem solid #E57368;
}
.ribbon.ribbon--orange {
background: linear-gradient(to bottom, #e7711b 0%, #f7981d 100%);
}
.ribbon.ribbon--orange:after {
border-top: 1.5rem solid #F7981D;
}
.ribbon.ribbon--yellow {
background: linear-gradient(to bottom, #f1ca3a 0%, #f6eb3b 100%);
}
.ribbon.ribbon--yellow:after {
border-top: 1.5rem solid #F6EB3B;
}
.ribbon.ribbon--green {
background: linear-gradient(to bottom, #5f9654 0%, #65b045 100%);
}
.ribbon.ribbon--green:after {
border-top: 1.5rem solid #65B045;
}
.ribbon.ribbon--blue {
background: linear-gradient(to bottom, #1c91c0 0%, #11a9cc 100%);
}
.ribbon.ribbon--blue:after {
border-top: 1.5rem solid #11A9CC;
}
.ribbon.ribbon--purple {
background: linear-gradient(to bottom, #5c3292 0%, #7e3794 100%);
}
.ribbon.ribbon--purple:after {
border-top: 1.5rem solid #7E3794;
}
</style>
</head>
<body>
<span>CSS Ribbon Product Badges</span>
<div class="ribbon ribbon--red">SAVE 10%</div>
<div class="ribbon ribbon--orange">SAVE 20%</div>
<div class="ribbon ribbon--yellow">SAVE 30%</div>
<div class="ribbon ribbon--green">SAVE 40%</div>
<div class="ribbon ribbon--blue">SAVE 50%</div>
<div class="ribbon ribbon--purple">SAVE 60%</div>
<div class="ribbon">SAVE 70%</div>
</body>
</html>
8. CSS Corner Ribbon
Made by Wesley Cole. Source


<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
.product {
margin: 50px auto;
width: 280px;
height: 370px;
background: white;
border: 1px solid #333;
position: relative;
z-index: 90;
}
.ribbon-wrapper {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
left: -3px;
}
.ribbon-wrapper .ribbon {
font: bold 15px sans-serif;
color: #333;
text-align: center;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
position: relative;
padding: 7px 0;
top: 15px;
left: -30px;
width: 120px;
background-color: #ebb134;
color: #fff;
}
</style>
</head>
<body>
<div class="product">
<div class="ribbon-wrapper">
<div class="ribbon">NEW</div>
</div>
</div>
</body>
</html>
9. Pure CSS corner ribbon
Made by Naoya. Source


<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Lato:700);
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f0f0f0;
}
.box {
position: relative;
max-width: 600px;
width: 90%;
height: 400px;
background: #fff;
box-shadow: 0 0 15px rgba(0,0,0,.1);
}
/* common */
.ribbon {
width: 150px;
height: 150px;
overflow: hidden;
position: absolute;
}
.ribbon::before,
.ribbon::after {
position: absolute;
z-index: -1;
content: '';
display: block;
border: 5px solid #2980b9;
}
.ribbon span {
position: absolute;
display: block;
width: 225px;
padding: 15px 0;
background-color: #3498db;
box-shadow: 0 5px 10px rgba(0,0,0,.1);
color: #fff;
font: 700 18px/1 'Lato', sans-serif;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
text-transform: uppercase;
text-align: center;
}
/* top left*/
.ribbon-top-left {
top: -10px;
left: -10px;
}
.ribbon-top-left::before,
.ribbon-top-left::after {
border-top-color: transparent;
border-left-color: transparent;
}
.ribbon-top-left::before {
top: 0;
right: 0;
}
.ribbon-top-left::after {
bottom: 0;
left: 0;
}
.ribbon-top-left span {
right: -25px;
top: 30px;
transform: rotate(-45deg);
}
/* top right*/
.ribbon-top-right {
top: -10px;
right: -10px;
}
.ribbon-top-right::before,
.ribbon-top-right::after {
border-top-color: transparent;
border-right-color: transparent;
}
.ribbon-top-right::before {
top: 0;
left: 0;
}
.ribbon-top-right::after {
bottom: 0;
right: 0;
}
.ribbon-top-right span {
left: -25px;
top: 30px;
transform: rotate(45deg);
}
/* bottom left*/
.ribbon-bottom-left {
bottom: -10px;
left: -10px;
}
.ribbon-bottom-left::before,
.ribbon-bottom-left::after {
border-bottom-color: transparent;
border-left-color: transparent;
}
.ribbon-bottom-left::before {
bottom: 0;
right: 0;
}
.ribbon-bottom-left::after {
top: 0;
left: 0;
}
.ribbon-bottom-left span {
right: -25px;
bottom: 30px;
transform: rotate(225deg);
}
/* bottom right*/
.ribbon-bottom-right {
bottom: -10px;
right: -10px;
}
.ribbon-bottom-right::before,
.ribbon-bottom-right::after {
border-bottom-color: transparent;
border-right-color: transparent;
}
.ribbon-bottom-right::before {
bottom: 0;
left: 0;
}
.ribbon-bottom-right::after {
top: 0;
right: 0;
}
.ribbon-bottom-right span {
left: -25px;
bottom: 30px;
transform: rotate(-225deg);
}
</style>
</head>
<body>
<div class="box">
<div class="ribbon ribbon-top-left"><span>ribbon</span></div>
<div class="ribbon ribbon-top-right"><span>ribbon</span></div>
<div class="ribbon ribbon-bottom-left"><span>ribbon</span></div>
<div class="ribbon ribbon-bottom-right"><span>ribbon</span></div>
</div>
</body>
</html>
10. Ribbon Wrapped Around Ellipse
Made by Melanie. Source


<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link href='https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
* {
margin: 0px;
padding: 0px;
}
html {
width: 100%;
height: 100%;
text-align: center;
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/104005/Plaid_bkg_blue.png");
}
#container {
position: relative;
margin: 0 auto;
width: 950px;
padding: 20px;
}
#header {
position: relative;
min-height: 150px;
text-align: center;
padding: 10px;
}
#header img {
max-width: 355px;
postion: relative;
}
#ribbon {
background-color: #47c7f0;
width: 335px;
padding: 10px;
position: relative;
margin-top: -88px;
margin-left: auto;
margin-right: auto;
font-family: 'Shadows Into Light Two', cursive;
font-size: 20px;
letter-spacing: 2px;
color: #ffffff;
text-align: center;
box-shadow: 0 2px 6px #999999;
}
/*Ribbon Ends*/
#ribbon:before,
#ribbon:after {
content: "";
width: 3px;
bottom: 18px;
position: absolute;
display: block;
border: 25px solid #47c7f0;
box-shadow: 0 8px 6px -6px #999999;
z-index: -2;
}
/*Left Ribbon End*/
#ribbon:before {
left: -42px;
border-right-width: 35px;
border-left-color: transparent;
}
/*Right Ribbon End*/
#ribbon:after {
right: -42px;
border-left-width: 35px;
border-right-color: transparent;
}
/*Wrap*/
#nav:before,
#nav:after {
content: "";
bottom: 44px;
position: absolute;
display: block;
border-style: solid;
z-index: -1;
}
/*Left Ribbon Wrap*/
#nav:before {
left: 0;
border-width: 0px 0px 20px 20px;
border-color: transparent transparent #3497b5 transparent;
}
/*Right Ribbon Wrap*/
#nav:after {
right: 0;
border-width: 20px 0px 0px 20px;
border-color: transparent transparent transparent #3497b5;
}
/*Nav Styles*/
#nav ul {
width: 100%;
list-style: none;
margin: 0px;
text-align: center;
}
#nav li {
display: inline;
padding: 10px;
}
#nav a {
text-decoration: none;
color: white;
text-align: center;
}
#nav a:hover {
color: navy;
</style>
</head>
<body>
<div id="container" class="section">
<div id="header">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/104005/OC_logo2.png" alt "Orange Cupboard Jelly Company"></a>
</div>
<div id="ribbon">
<div id="nav">
<ul class="nav">
<li class="flavors"><a href="#">About</a></li>
<li class="locations"><a href="#">Flavors</a></li>
<li class="contact"><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
11. CSS3 Ribbons
Made by Pongstr. Source


<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Pacifico'>
<style>
html,
body {
height: 100%;
font-family: "Helvetica Neue", Helvetica, sans-serif;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.container {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 768px) {
.container {
width: 768px;
}
}
@media (min-width: 992px) {
.container {
width: 992px;
}
}
@media (min-width: 1200px) {
.container {
width: 1200px;
}
}
h1 {
display: block;
clear: both;
width: 96%;
margin: 25px auto;
font-family: "Pacifico", cursive;
font-size: 64px;
font-weight: bold;
text-align: center;
background: -webkit-linear-gradient(#5bc0de, #428bca);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
pre {
position: relative;
padding-left: 15px;
padding-right: 15px;
position: relative;
padding-left: 15px;
padding-right: 15px;
margin: 15px auto;
padding: 10px;
font-family: Consolas, Menlo, Courier, monsopace;
font-size: 13px;
line-height: 1.5;
border: 1px solid #ddd;
background-color: #f4f4f4;
border-radius: 4px;
box-shadow: 0 0 5px rgba(51, 51, 51, 0.1) inset;
}
@media (min-width: 480px) {
pre {
float: left;
width: 100%;
}
}
@media (min-width: 768px) {
pre {
float: left;
width: 50%;
}
}
@media (min-width: 992px), (min-width: 1200px) {
pre {
float: none;
clear: both;
width: 70%;
}
}
code {
display: inline-block;
margin: 15px auto;
padding: 5px 10px;
font-size: 13px;
font-weight: bold;
text-shadow: 0 1px 0 #fff;
background-color: #eee;
border: 1px solid #ddd;
border-radius: 3px;
}
ul.thumbnails {
margin-left: -15px;
margin-right: -15px;
margin: 0;
padding: 0;
list-style: none;
}
ul.thumbnails:before, ul.thumbnails:after {
display: table;
content: " ";
}
ul.thumbnails:after {
clear: both;
}
ul.thumbnails:before, ul.thumbnails:after {
display: table;
content: " ";
}
ul.thumbnails:after {
clear: both;
}
@media (min-width: 768px) {
ul.thumbnails {
margin-left: -15px;
margin-right: -15px;
}
}
ul.thumbnails > li {
position: relative;
padding-left: 15px;
padding-right: 15px;
position: relative;
padding-left: 15px;
padding-right: 15px;
position: relative;
padding-left: 15px;
padding-right: 15px;
position: relative;
padding-left: 15px;
padding-right: 15px;
text-align: center;
border-left: 1px solid #fff;
cursor: pointer;
}
@media (min-width: 480px) {
ul.thumbnails > li {
float: left;
width: 50%;
}
}
@media (min-width: 768px) {
ul.thumbnails > li {
float: left;
width: 50%;
}
}
@media (min-width: 992px) {
ul.thumbnails > li {
float: left;
width: 33.33333%;
}
}
@media (min-width: 1200px) {
ul.thumbnails > li {
float: left;
width: 33.33333%;
}
}
ul.thumbnails > li:nth-of-type(1) {
color: #000;
}
ul.thumbnails > li:nth-of-type(2) {
color: #428bca;
}
ul.thumbnails > li:nth-of-type(3) {
color: #5cb85c;
}
ul.thumbnails > li:nth-of-type(4) {
color: #5bc0de;
}
ul.thumbnails > li:nth-of-type(5) {
color: #f0ad4e;
}
ul.thumbnails > li:nth-of-type(6) {
color: #d9534f;
}
.content {
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
position: relative;
margin: 15px 0;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 3px;
}
.content:hover {
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-moz-transform: scale(1.3, 1.3);
-ms-transform: scale(1.3, 1.3);
-webkit-transform: scale(1.3, 1.3);
transform: scale(1.3, 1.3);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 500;
}
@media (min-width: 1200px) {
.content {
min-height: 260px;
}
}
.content .icon {
display: table;
width: 100%;
height: 270px;
text-align: center;
}
.content .icon > .fa {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.ribbon {
position: absolute;
z-index: 100;
width: 120px;
height: 120px;
overflow: hidden;
}
.ribbon.top-right {
top: -3px;
right: -6px;
}
.ribbon.top-right.ribbon-default > small {
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF4F4F4', endColorstr='#FFDDDDDD');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y0ZjRmNCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f4f4f4), color-stop(100%, #dddddd));
background-image: -moz-linear-gradient(top, #f4f4f4 0%, #dddddd 100%);
background-image: -webkit-linear-gradient(top, #f4f4f4 0%, #dddddd 100%);
background-image: linear-gradient(to bottom, #f4f4f4 0%, #dddddd 100%);
position: absolute;
display: block;
width: 100%;
padding: 8px 16px;
text-align: center;
text-transform: uppercase;
text-shadow: 0 2px 0 #cecece;
font-weight: bold;
font-size: 65%;
color: #000;
background-color: #f4f4f4;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-moz-box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
top: 16px;
left: 27px;
}
.ribbon.top-right.ribbon-default > small:before, .ribbon.top-right.ribbon-default > small:after {
position: absolute;
content: " ";
}
.ribbon.top-right.ribbon-default > small:before {
left: 0;
}
.ribbon.top-right.ribbon-default > small:after {
right: 0;
}
.ribbon.top-right.ribbon-default > small:before, .ribbon.top-right.ribbon-default > small:after {
bottom: -3px;
border-top: 3px solid #8e8e8e;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.ribbon.top-right.ribbon-primary > small {
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF428BCA', endColorstr='#FF2A6496');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQyOGJjYSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzJhNjQ5NiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #428bca), color-stop(100%, #2a6496));
background-image: -moz-linear-gradient(top, #428bca 0%, #2a6496 100%);
background-image: -webkit-linear-gradient(top, #428bca 0%, #2a6496 100%);
background-image: linear-gradient(to bottom, #428bca 0%, #2a6496 100%);
position: absolute;
display: block;
width: 100%;
padding: 8px 16px;
text-align: center;
text-transform: uppercase;
text-shadow: 0 2px 0 #2a6496;
font-weight: bold;
font-size: 65%;
color: #fff;
background-color: #428bca;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-moz-box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
top: 16px;
left: 27px;
}
.ribbon.top-right.ribbon-primary > small:before, .ribbon.top-right.ribbon-primary > small:after {
position: absolute;
content: " ";
}
.ribbon.top-right.ribbon-primary > small:before {
left: 0;
}
.ribbon.top-right.ribbon-primary > small:after {
right: 0;
}
.ribbon.top-right.ribbon-primary > small:before, .ribbon.top-right.ribbon-primary > small:after {
bottom: -3px;
border-top: 3px solid #0e2132;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.ribbon.top-right.ribbon-success > small {
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF5CB85C', endColorstr='#FF3D8B3D');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVjYjg1YyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNkOGIzZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5cb85c), color-stop(100%, #3d8b3d));
background-image: -moz-linear-gradient(top, #5cb85c 0%, #3d8b3d 100%);
background-image: -webkit-linear-gradient(top, #5cb85c 0%, #3d8b3d 100%);
background-image: linear-gradient(to bottom, #5cb85c 0%, #3d8b3d 100%);
position: absolute;
display: block;
width: 100%;
padding: 8px 16px;
text-align: center;
text-transform: uppercase;
text-shadow: 0 2px 0 #3d8b3d;
font-weight: bold;
font-size: 65%;
color: #fff;
background-color: #5cb85c;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-moz-box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
top: 16px;
left: 27px;
}
.ribbon.top-right.ribbon-success > small:before, .ribbon.top-right.ribbon-success > small:after {
position: absolute;
content: " ";
}
.ribbon.top-right.ribbon-success > small:before {
left: 0;
}
.ribbon.top-right.ribbon-success > small:after {
right: 0;
}
.ribbon.top-right.ribbon-success > small:before, .ribbon.top-right.ribbon-success > small:after {
bottom: -3px;
border-top: 3px solid #163216;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.ribbon.top-right.ribbon-info > small {
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF5BC0DE', endColorstr='#FF28A1C5');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzViYzBkZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI4YTFjNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5bc0de), color-stop(100%, #28a1c5));
background-image: -moz-linear-gradient(top, #5bc0de 0%, #28a1c5 100%);
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #28a1c5 100%);
background-image: linear-gradient(to bottom, #5bc0de 0%, #28a1c5 100%);
position: absolute;
display: block;
width: 100%;
padding: 8px 16px;
text-align: center;
text-transform: uppercase;
text-shadow: 0 2px 0 #28a1c5;
font-weight: bold;
font-size: 65%;
color: #fff;
background-color: #5bc0de;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-moz-box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
top: 16px;
left: 27px;
}
.ribbon.top-right.ribbon-info > small:before, .ribbon.top-right.ribbon-info > small:after {
position: absolute;
content: " ";
}
.ribbon.top-right.ribbon-info > small:before {
left: 0;
}
.ribbon.top-right.ribbon-info > small:after {
right: 0;
}
.ribbon.top-right.ribbon-info > small:before, .ribbon.top-right.ribbon-info > small:after {
bottom: -3px;
border-top: 3px solid #124a5b;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.ribbon.top-right.ribbon-warning > small {
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF0AD4E', endColorstr='#FFDF8A13');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYWQ0ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RmOGExMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f0ad4e), color-stop(100%, #df8a13));
background-image: -moz-linear-gradient(top, #f0ad4e 0%, #df8a13 100%);
background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #df8a13 100%);
background-image: linear-gradient(to bottom, #f0ad4e 0%, #df8a13 100%);
position: absolute;
display: block;
width: 100%;
padding: 8px 16px;
text-align: center;
text-transform: uppercase;
text-shadow: 0 2px 0 #df8a13;
font-weight: bold;
font-size: 65%;
color: #fff;
background-color: #f0ad4e;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-moz-box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
top: 16px;
left: 27px;
}
.ribbon.top-right.ribbon-warning > small:before, .ribbon.top-right.ribbon-warning > small:after {
position: absolute;
content: " ";
}
.ribbon.top-right.ribbon-warning > small:before {
left: 0;
}
.ribbon.top-right.ribbon-warning > small:after {
right: 0;
}
.ribbon.top-right.ribbon-warning > small:before, .ribbon.top-right.ribbon-warning > small:after {
bottom: -3px;
border-top: 3px solid #694109;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.ribbon.top-right.ribbon-danger > small {
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFD9534F', endColorstr='#FFB52B27');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q5NTM0ZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2I1MmIyNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d9534f), color-stop(100%, #b52b27));
background-image: -moz-linear-gradient(top, #d9534f 0%, #b52b27 100%);
background-image: -webkit-linear-gradient(top, #d9534f 0%, #b52b27 100%);
background-image: linear-gradient(to bottom, #d9534f 0%, #b52b27 100%);
position: absolute;
display: block;
width: 100%;
padding: 8px 16px;
text-align: center;
text-transform: uppercase;
text-shadow: 0 2px 0 #b52b27;
font-weight: bold;
font-size: 65%;
color: #fff;
background-color: #d9534f;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-moz-box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
top: 16px;
left: 27px;
}
.ribbon.top-right.ribbon-danger > small:before, .ribbon.top-right.ribbon-danger > small:after {
position: absolute;
content: " ";
}
.ribbon.top-right.ribbon-danger > small:before {
left: 0;
}
.ribbon.top-right.ribbon-danger > small:after {
right: 0;
}
.ribbon.top-right.ribbon-danger > small:before, .ribbon.top-right.ribbon-danger > small:after {
bottom: -3px;
border-top: 3px solid #4c1210;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.ribbon.top-left {
top: -3px;
left: -6px;
}
.ribbon.top-left.ribbon-default > small {
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF4F4F4', endColorstr='#FFDDDDDD');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y0ZjRmNCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f4f4f4), color-stop(100%, #dddddd));
background-image: -moz-linear-gradient(top, #f4f4f4 0%, #dddddd 100%);
background-image: -webkit-linear-gradient(top, #f4f4f4 0%, #dddddd 100%);
background-image: linear-gradient(to bottom, #f4f4f4 0%, #dddddd 100%);
position: absolute;
display: block;
width: 100%;
padding: 8px 16px;
text-align: center;
text-transform: uppercase;
text-shadow: 0 2px 0 #cecece;
font-weight: bold;
font-size: 65%;
color: #000;
background-color: #f4f4f4;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-moz-box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
top: 16px;
left: -27px;
}
.ribbon.top-left.ribbon-default > small:before, .ribbon.top-left.ribbon-default > small:after {
position: absolute;
content: " ";
}
.ribbon.top-left.ribbon-default > small:before {
left: 0;
}
.ribbon.top-left.ribbon-default > small:after {
right: 0;
}
.ribbon.top-left.ribbon-default > small:before, .ribbon.top-left.ribbon-default > small:after {
bottom: -3px;
border-top: 3px solid #8e8e8e;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.ribbon.top-left.ribbon-primary > small {
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF428BCA', endColorstr='#FF2A6496');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQyOGJjYSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzJhNjQ5NiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #428bca), color-stop(100%, #2a6496));
background-image: -moz-linear-gradient(top, #428bca 0%, #2a6496 100%);
background-image: -webkit-linear-gradient(top, #428bca 0%, #2a6496 100%);
background-image: linear-gradient(to bottom, #428bca 0%, #2a6496 100%);
position: absolute;
display: block;
width: 100%;
padding: 8px 16px;
text-align: center;
text-transform: uppercase;
text-shadow: 0 2px 0 #2a6496;
font-weight: bold;
font-size: 65%;
color: #fff;
background-color: #428bca;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-moz-box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
top: 16px;
left: -27px;
}
.ribbon.top-left.ribbon-primary > small:before, .ribbon.top-left.ribbon-primary > small:after {
position: absolute;
content: " ";
}
.ribbon.top-left.ribbon-primary > small:before {
left: 0;
}
.ribbon.top-left.ribbon-primary > small:after {
right: 0;
}
.ribbon.top-left.ribbon-primary > small:before, .ribbon.top-left.ribbon-primary > small:after {
bottom: -3px;
border-top: 3px solid #0e2132;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.ribbon.top-left.ribbon-success > small {
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF5CB85C', endColorstr='#FF3D8B3D');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVjYjg1YyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNkOGIzZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5cb85c), color-stop(100%, #3d8b3d));
background-image: -moz-linear-gradient(top, #5cb85c 0%, #3d8b3d 100%);
background-image: -webkit-linear-gradient(top, #5cb85c 0%, #3d8b3d 100%);
background-image: linear-gradient(to bottom, #5cb85c 0%, #3d8b3d 100%);
position: absolute;
display: block;
width: 100%;
padding: 8px 16px;
text-align: center;
text-transform: uppercase;
text-shadow: 0 2px 0 #3d8b3d;
font-weight: bold;
font-size: 65%;
color: #fff;
background-color: #5cb85c;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-moz-box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
top: 16px;
left: -27px;
}
.ribbon.top-left.ribbon-success > small:before, .ribbon.top-left.ribbon-success > small:after {
position: absolute;
content: " ";
}
.ribbon.top-left.ribbon-success > small:before {
left: 0;
}
.ribbon.top-left.ribbon-success > small:after {
right: 0;
}
.ribbon.top-left.ribbon-success > small:before, .ribbon.top-left.ribbon-success > small:after {
bottom: -3px;
border-top: 3px solid #163216;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.ribbon.top-left.ribbon-info > small {
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF5BC0DE', endColorstr='#FF28A1C5');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzViYzBkZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI4YTFjNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5bc0de), color-stop(100%, #28a1c5));
background-image: -moz-linear-gradient(top, #5bc0de 0%, #28a1c5 100%);
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #28a1c5 100%);
background-image: linear-gradient(to bottom, #5bc0de 0%, #28a1c5 100%);
position: absolute;
display: block;
width: 100%;
padding: 8px 16px;
text-align: center;
text-transform: uppercase;
text-shadow: 0 2px 0 #28a1c5;
font-weight: bold;
font-size: 65%;
color: #fff;
background-color: #5bc0de;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-moz-box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
top: 16px;
left: -27px;
}
.ribbon.top-left.ribbon-info > small:before, .ribbon.top-left.ribbon-info > small:after {
position: absolute;
content: " ";
}
.ribbon.top-left.ribbon-info > small:before {
left: 0;
}
.ribbon.top-left.ribbon-info > small:after {
right: 0;
}
.ribbon.top-left.ribbon-info > small:before, .ribbon.top-left.ribbon-info > small:after {
bottom: -3px;
border-top: 3px solid #124a5b;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.ribbon.top-left.ribbon-warning > small {
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF0AD4E', endColorstr='#FFDF8A13');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYWQ0ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RmOGExMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f0ad4e), color-stop(100%, #df8a13));
background-image: -moz-linear-gradient(top, #f0ad4e 0%, #df8a13 100%);
background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #df8a13 100%);
background-image: linear-gradient(to bottom, #f0ad4e 0%, #df8a13 100%);
position: absolute;
display: block;
width: 100%;
padding: 8px 16px;
text-align: center;
text-transform: uppercase;
text-shadow: 0 2px 0 #df8a13;
font-weight: bold;
font-size: 65%;
color: #fff;
background-color: #f0ad4e;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-moz-box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
top: 16px;
left: -27px;
}
.ribbon.top-left.ribbon-warning > small:before, .ribbon.top-left.ribbon-warning > small:after {
position: absolute;
content: " ";
}
.ribbon.top-left.ribbon-warning > small:before {
left: 0;
}
.ribbon.top-left.ribbon-warning > small:after {
right: 0;
}
.ribbon.top-left.ribbon-warning > small:before, .ribbon.top-left.ribbon-warning > small:after {
bottom: -3px;
border-top: 3px solid #694109;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.ribbon.top-left.ribbon-danger > small {
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFD9534F', endColorstr='#FFB52B27');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q5NTM0ZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2I1MmIyNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d9534f), color-stop(100%, #b52b27));
background-image: -moz-linear-gradient(top, #d9534f 0%, #b52b27 100%);
background-image: -webkit-linear-gradient(top, #d9534f 0%, #b52b27 100%);
background-image: linear-gradient(to bottom, #d9534f 0%, #b52b27 100%);
position: absolute;
display: block;
width: 100%;
padding: 8px 16px;
text-align: center;
text-transform: uppercase;
text-shadow: 0 2px 0 #b52b27;
font-weight: bold;
font-size: 65%;
color: #fff;
background-color: #d9534f;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-moz-box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
top: 16px;
left: -27px;
}
.ribbon.top-left.ribbon-danger > small:before, .ribbon.top-left.ribbon-danger > small:after {
position: absolute;
content: " ";
}
.ribbon.top-left.ribbon-danger > small:before {
left: 0;
}
.ribbon.top-left.ribbon-danger > small:after {
right: 0;
}
.ribbon.top-left.ribbon-danger > small:before, .ribbon.top-left.ribbon-danger > small:after {
bottom: -3px;
border-top: 3px solid #4c1210;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.ribbon.bottom-right {
bottom: -3px;
right: -6px;
}
.ribbon.bottom-right.ribbon-default > small {
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF4F4F4', endColorstr='#FFDDDDDD');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y0ZjRmNCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f4f4f4), color-stop(100%, #dddddd));
background-image: -moz-linear-gradient(top, #f4f4f4 0%, #dddddd 100%);
background-image: -webkit-linear-gradient(top, #f4f4f4 0%, #dddddd 100%);
background-image: linear-gradient(to bottom, #f4f4f4 0%, #dddddd 100%);
position: absolute;
display: block;
width: 100%;
padding: 8px 16px;
text-align: center;
text-transform: uppercase;
text-shadow: 0 2px 0 #cecece;
font-weight: bold;
font-size: 65%;
color: #000;
background-color: #f4f4f4;
-moz-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
-moz-box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
bottom: 21px;
right: -31px;
}
.ribbon.bottom-right.ribbon-default > small:before, .ribbon.bottom-right.ribbon-default > small:after {
position: absolute;
content: " ";
}
.ribbon.bottom-right.ribbon-default > small:before {
left: 0;
}
.ribbon.bottom-right.ribbon-default > small:after {
right: 0;
}
.ribbon.bottom-right.ribbon-default > small:before, .ribbon.bottom-right.ribbon-default > small:after {
top: -3px;
border-bottom: 3px solid #8e8e8e;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.ribbon.bottom-right.ribbon-primary > small {
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF428BCA', endColorstr='#FF2A6496');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQyOGJjYSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzJhNjQ5NiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #428bca), color-stop(100%, #2a6496));
background-image: -moz-linear-gradient(top, #428bca 0%, #2a6496 100%);
background-image: -webkit-linear-gradient(top, #428bca 0%, #2a6496 100%);
background-image: linear-gradient(to bottom, #428bca 0%, #2a6496 100%);
position: absolute;
display: block;
width: 100%;
padding: 8px 16px;
text-align: center;
text-transform: uppercase;
text-shadow: 0 2px 0 #2a6496;
font-weight: bold;
font-size: 65%;
color: #fff;
background-color: #428bca;
-moz-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
-moz-box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
bottom: 21px;
right: -31px;
}
.ribbon.bottom-right.ribbon-primary > small:before, .ribbon.bottom-right.ribbon-primary > small:after {
position: absolute;
content: " ";
}
.ribbon.bottom-right.ribbon-primary > small:before {
left: 0;
}
.ribbon.bottom-right.ribbon-primary > small:after {
right: 0;
}
.ribbon.bottom-right.ribbon-primary > small:before, .ribbon.bottom-right.ribbon-primary > small:after {
top: -3px;
border-bottom: 3px solid #0e2132;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.ribbon.bottom-right.ribbon-success > small {
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF5CB85C', endColorstr='#FF3D8B3D');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVjYjg1YyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNkOGIzZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5cb85c), color-stop(100%, #3d8b3d));
background-image: -moz-linear-gradient(top, #5cb85c 0%, #3d8b3d 100%);
background-image: -webkit-linear-gradient(top, #5cb85c 0%, #3d8b3d 100%);
background-image: linear-gradient(to bottom, #5cb85c 0%, #3d8b3d 100%);
position: absolute;
display: block;
width: 100%;
padding: 8px 16px;
text-align: center;
text-transform: uppercase;
text-shadow: 0 2px 0 #3d8b3d;
font-weight: bold;
font-size: 65%;
color: #fff;
background-color: #5cb85c;
-moz-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
-moz-box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
bottom: 21px;
right: -31px;
}
.ribbon.bottom-right.ribbon-success > small:before, .ribbon.bottom-right.ribbon-success > small:after {
position: absolute;
content: " ";
}
.ribbon.bottom-right.ribbon-success > small:before {
left: 0;
}
.ribbon.bottom-right.ribbon-success > small:after {
right: 0;
}
.ribbon.bottom-right.ribbon-success > small:before, .ribbon.bottom-right.ribbon-success > small:after {
top: -3px;
border-bottom: 3px solid #163216;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.ribbon.bottom-right.ribbon-info > small {
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF5BC0DE', endColorstr='#FF28A1C5');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzViYzBkZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI4YTFjNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5bc0de), color-stop(100%, #28a1c5));
background-image: -moz-linear-gradient(top, #5bc0de 0%, #28a1c5 100%);
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #28a1c5 100%);
background-image: linear-gradient(to bottom, #5bc0de 0%, #28a1c5 100%);
position: absolute;
display: block;
width: 100%;
padding: 8px 16px;
text-align: center;
text-transform: uppercase;
text-shadow: 0 2px 0 #28a1c5;
font-weight: bold;
font-size: 65%;
color: #fff;
background-color: #5bc0de;
-moz-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
-moz-box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
bottom: 21px;
right: -31px;
}
.ribbon.bottom-right.ribbon-info > small:before, .ribbon.bottom-right.ribbon-info > small:after {
position: absolute;
content: " ";
}
.ribbon.bottom-right.ribbon-info > small:before {
left: 0;
}
.ribbon.bottom-right.ribbon-info > small:after {
right: 0;
}
.ribbon.bottom-right.ribbon-info > small:before, .ribbon.bottom-right.ribbon-info > small:after {
top: -3px;
border-bottom: 3px solid #124a5b;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.ribbon.bottom-right.ribbon-warning > small {
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF0AD4E', endColorstr='#FFDF8A13');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYWQ0ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RmOGExMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f0ad4e), color-stop(100%, #df8a13));
background-image: -moz-linear-gradient(top, #f0ad4e 0%, #df8a13 100%);
background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #df8a13 100%);
background-image: linear-gradient(to bottom, #f0ad4e 0%, #df8a13 100%);
position: absolute;
display: block;
width: 100%;
padding: 8px 16px;
text-align: center;
text-transform: uppercase;
text-shadow: 0 2px 0 #df8a13;
font-weight: bold;
font-size: 65%;
color: #fff;
background-color: #f0ad4e;
-moz-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
-moz-box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
bottom: 21px;
right: -31px;
}
.ribbon.bottom-right.ribbon-warning > small:before, .ribbon.bottom-right.ribbon-warning > small:after {
position: absolute;
content: " ";
}
.ribbon.bottom-right.ribbon-warning > small:before {
left: 0;
}
.ribbon.bottom-right.ribbon-warning > small:after {
right: 0;
}
.ribbon.bottom-right.ribbon-warning > small:before, .ribbon.bottom-right.ribbon-warning > small:after {
top: -3px;
border-bottom: 3px solid #694109;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.ribbon.bottom-right.ribbon-danger > small {
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFD9534F', endColorstr='#FFB52B27');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q5NTM0ZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2I1MmIyNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d9534f), color-stop(100%, #b52b27));
background-image: -moz-linear-gradient(top, #d9534f 0%, #b52b27 100%);
background-image: -webkit-linear-gradient(top, #d9534f 0%, #b52b27 100%);
background-image: linear-gradient(to bottom, #d9534f 0%, #b52b27 100%);
position: absolute;
display: block;
width: 100%;
padding: 8px 16px;
text-align: center;
text-transform: uppercase;
text-shadow: 0 2px 0 #b52b27;
font-weight: bold;
font-size: 65%;
color: #fff;
background-color: #d9534f;
-moz-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
-moz-box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
bottom: 21px;
right: -31px;
}
.ribbon.bottom-right.ribbon-danger > small:before, .ribbon.bottom-right.ribbon-danger > small:after {
position: absolute;
content: " ";
}
.ribbon.bottom-right.ribbon-danger > small:before {
left: 0;
}
.ribbon.bottom-right.ribbon-danger > small:after {
right: 0;
}
.ribbon.bottom-right.ribbon-danger > small:before, .ribbon.bottom-right.ribbon-danger > small:after {
top: -3px;
border-bottom: 3px solid #4c1210;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.ribbon.bottom-left {
bottom: -3px;
left: -6px;
}
.ribbon.bottom-left.ribbon-default > small {
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF4F4F4', endColorstr='#FFDDDDDD');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y0ZjRmNCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f4f4f4), color-stop(100%, #dddddd));
background-image: -moz-linear-gradient(top, #f4f4f4 0%, #dddddd 100%);
background-image: -webkit-linear-gradient(top, #f4f4f4 0%, #dddddd 100%);
background-image: linear-gradient(to bottom, #f4f4f4 0%, #dddddd 100%);
position: absolute;
display: block;
width: 100%;
padding: 8px 16px;
text-align: center;
text-transform: uppercase;
text-shadow: 0 2px 0 #cecece;
font-weight: bold;
font-size: 65%;
color: #000;
background-color: #f4f4f4;
-moz-transform: rotate(50deg);
-ms-transform: rotate(50deg);
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
-moz-box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
bottom: 21px;
left: -31px;
}
.ribbon.bottom-left.ribbon-default > small:before, .ribbon.bottom-left.ribbon-default > small:after {
position: absolute;
content: " ";
}
.ribbon.bottom-left.ribbon-default > small:before {
left: 0;
}
.ribbon.bottom-left.ribbon-default > small:after {
right: 0;
}
.ribbon.bottom-left.ribbon-default > small:before, .ribbon.bottom-left.ribbon-default > small:after {
top: -3px;
border-bottom: 3px solid #8e8e8e;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.ribbon.bottom-left.ribbon-primary > small {
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF428BCA', endColorstr='#FF2A6496');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQyOGJjYSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzJhNjQ5NiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #428bca), color-stop(100%, #2a6496));
background-image: -moz-linear-gradient(top, #428bca 0%, #2a6496 100%);
background-image: -webkit-linear-gradient(top, #428bca 0%, #2a6496 100%);
background-image: linear-gradient(to bottom, #428bca 0%, #2a6496 100%);
position: absolute;
display: block;
width: 100%;
padding: 8px 16px;
text-align: center;
text-transform: uppercase;
text-shadow: 0 2px 0 #2a6496;
font-weight: bold;
font-size: 65%;
color: #fff;
background-color: #428bca;
-moz-transform: rotate(50deg);
-ms-transform: rotate(50deg);
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
-moz-box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
bottom: 21px;
left: -31px;
}
.ribbon.bottom-left.ribbon-primary > small:before, .ribbon.bottom-left.ribbon-primary > small:after {
position: absolute;
content: " ";
}
.ribbon.bottom-left.ribbon-primary > small:before {
left: 0;
}
.ribbon.bottom-left.ribbon-primary > small:after {
right: 0;
}
.ribbon.bottom-left.ribbon-primary > small:before, .ribbon.bottom-left.ribbon-primary > small:after {
top: -3px;
border-bottom: 3px solid #0e2132;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.ribbon.bottom-left.ribbon-success > small {
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF5CB85C', endColorstr='#FF3D8B3D');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVjYjg1YyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNkOGIzZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5cb85c), color-stop(100%, #3d8b3d));
background-image: -moz-linear-gradient(top, #5cb85c 0%, #3d8b3d 100%);
background-image: -webkit-linear-gradient(top, #5cb85c 0%, #3d8b3d 100%);
background-image: linear-gradient(to bottom, #5cb85c 0%, #3d8b3d 100%);
position: absolute;
display: block;
width: 100%;
padding: 8px 16px;
text-align: center;
text-transform: uppercase;
text-shadow: 0 2px 0 #3d8b3d;
font-weight: bold;
font-size: 65%;
color: #fff;
background-color: #5cb85c;
-moz-transform: rotate(50deg);
-ms-transform: rotate(50deg);
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
-moz-box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
bottom: 21px;
left: -31px;
}
.ribbon.bottom-left.ribbon-success > small:before, .ribbon.bottom-left.ribbon-success > small:after {
position: absolute;
content: " ";
}
.ribbon.bottom-left.ribbon-success > small:before {
left: 0;
}
.ribbon.bottom-left.ribbon-success > small:after {
right: 0;
}
.ribbon.bottom-left.ribbon-success > small:before, .ribbon.bottom-left.ribbon-success > small:after {
top: -3px;
border-bottom: 3px solid #163216;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.ribbon.bottom-left.ribbon-info > small {
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF5BC0DE', endColorstr='#FF28A1C5');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzViYzBkZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI4YTFjNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5bc0de), color-stop(100%, #28a1c5));
background-image: -moz-linear-gradient(top, #5bc0de 0%, #28a1c5 100%);
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #28a1c5 100%);
background-image: linear-gradient(to bottom, #5bc0de 0%, #28a1c5 100%);
position: absolute;
display: block;
width: 100%;
padding: 8px 16px;
text-align: center;
text-transform: uppercase;
text-shadow: 0 2px 0 #28a1c5;
font-weight: bold;
font-size: 65%;
color: #fff;
background-color: #5bc0de;
-moz-transform: rotate(50deg);
-ms-transform: rotate(50deg);
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
-moz-box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
bottom: 21px;
left: -31px;
}
.ribbon.bottom-left.ribbon-info > small:before, .ribbon.bottom-left.ribbon-info > small:after {
position: absolute;
content: " ";
}
.ribbon.bottom-left.ribbon-info > small:before {
left: 0;
}
.ribbon.bottom-left.ribbon-info > small:after {
right: 0;
}
.ribbon.bottom-left.ribbon-info > small:before, .ribbon.bottom-left.ribbon-info > small:after {
top: -3px;
border-bottom: 3px solid #124a5b;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.ribbon.bottom-left.ribbon-warning > small {
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF0AD4E', endColorstr='#FFDF8A13');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYWQ0ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RmOGExMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f0ad4e), color-stop(100%, #df8a13));
background-image: -moz-linear-gradient(top, #f0ad4e 0%, #df8a13 100%);
background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #df8a13 100%);
background-image: linear-gradient(to bottom, #f0ad4e 0%, #df8a13 100%);
position: absolute;
display: block;
width: 100%;
padding: 8px 16px;
text-align: center;
text-transform: uppercase;
text-shadow: 0 2px 0 #df8a13;
font-weight: bold;
font-size: 65%;
color: #fff;
background-color: #f0ad4e;
-moz-transform: rotate(50deg);
-ms-transform: rotate(50deg);
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
-moz-box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
bottom: 21px;
left: -31px;
}
.ribbon.bottom-left.ribbon-warning > small:before, .ribbon.bottom-left.ribbon-warning > small:after {
position: absolute;
content: " ";
}
.ribbon.bottom-left.ribbon-warning > small:before {
left: 0;
}
.ribbon.bottom-left.ribbon-warning > small:after {
right: 0;
}
.ribbon.bottom-left.ribbon-warning > small:before, .ribbon.bottom-left.ribbon-warning > small:after {
top: -3px;
border-bottom: 3px solid #694109;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.ribbon.bottom-left.ribbon-danger > small {
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFD9534F', endColorstr='#FFB52B27');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q5NTM0ZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2I1MmIyNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d9534f), color-stop(100%, #b52b27));
background-image: -moz-linear-gradient(top, #d9534f 0%, #b52b27 100%);
background-image: -webkit-linear-gradient(top, #d9534f 0%, #b52b27 100%);
background-image: linear-gradient(to bottom, #d9534f 0%, #b52b27 100%);
position: absolute;
display: block;
width: 100%;
padding: 8px 16px;
text-align: center;
text-transform: uppercase;
text-shadow: 0 2px 0 #b52b27;
font-weight: bold;
font-size: 65%;
color: #fff;
background-color: #d9534f;
-moz-transform: rotate(50deg);
-ms-transform: rotate(50deg);
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
-moz-box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.5);
bottom: 21px;
left: -31px;
}
.ribbon.bottom-left.ribbon-danger > small:before, .ribbon.bottom-left.ribbon-danger > small:after {
position: absolute;
content: " ";
}
.ribbon.bottom-left.ribbon-danger > small:before {
left: 0;
}
.ribbon.bottom-left.ribbon-danger > small:after {
right: 0;
}
.ribbon.bottom-left.ribbon-danger > small:before, .ribbon.bottom-left.ribbon-danger > small:after {
top: -3px;
border-bottom: 3px solid #4c1210;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.str,
.atv {
color: #D14;
}
.pun,
.opn,
.clo {
color: #93a1a1;
}
.kwd,
.prettyprint
.tag {
color: #1e347b;
}
.typ,
.atn,
.dec,
.var {
color: teal;
}
.lit {
color: #195f91;
}
.fun {
color: #dc322f;
}
.pln {
color: #48484c;
}
.com {
font-style: italic;
color: #93a1a1;
}
.prettyprint.linenums {
-moz-box-shadow: inset 45px 0 0 #fafafa;
-webkit-box-shadow: inset 45px 0 0 #fafafa;
box-shadow: inset 45px 0 0 #fafafa;
}
.prettyprint ol.linenums {
margin: 0;
margin-left: -5px;
}
.prettyprint ol.linenums > li {
padding-left: 12px;
color: #bebec5;
line-height: 1.6;
}
.lt-ie9 .prettyprint ol.linenums {
margin: 0;
margin-left: 33px;
}
</style>
</head>
<body>
<div class="container">
<h1>CSS Ribbons</h1>
</div>
<div class="container">
<ul class="thumbnails">
<li>
<div class="content">
<span class="ribbon top-right ribbon-default">
<small>default</small>
</span>
<span class="ribbon top-left ribbon-default">
<small>default</small>
</span>
<span class="ribbon bottom-right ribbon-default">
<small>default</small>
</span>
<span class="ribbon bottom-left ribbon-default">
<small>default</small>
</span>
<div class="icon">
<i class="fa fa-codepen fa-4x"></i>
</div>
<code>.ribbon-default</code>
</div>
</li>
<li>
<div class="content">
<span class="ribbon top-right ribbon-primary">
<small>primary</small>
</span>
<span class="ribbon top-left ribbon-primary">
<small>primary</small>
</span>
<span class="ribbon bottom-right ribbon-primary">
<small>primary</small>
</span>
<span class="ribbon bottom-left ribbon-primary">
<small>primary</small>
</span>
<div class="icon">
<i class="fa fa-github fa-4x"></i>
</div>
<code>.ribbon-primary</code>
</div>
</li>
<li>
<div class="content">
<span class="ribbon top-right ribbon-success">
<small>success</small>
</span>
<span class="ribbon top-left ribbon-success">
<small>success</small>
</span>
<span class="ribbon bottom-right ribbon-success">
<small>success</small>
</span>
<span class="ribbon bottom-left ribbon-success">
<small>success</small>
</span>
<div class="icon">
<i class="fa fa-android fa-4x"></i>
</div>
<code>.ribbon-success</code>
</div>
</li>
<li>
<div class="content">
<span class="ribbon top-right ribbon-info">
<small>info</small>
</span>
<span class="ribbon top-left ribbon-info">
<small>info</small>
</span>
<span class="ribbon bottom-right ribbon-info">
<small>info</small>
</span>
<span class="ribbon bottom-left ribbon-info">
<small>info</small>
</span>
<div class="icon">
<i class="fa fa-twitter fa-4x"></i>
</div>
<code>.ribbon-info</code>
</div>
</li>
<li>
<div class="content">
<span class="ribbon top-right ribbon-warning">
<small>warning</small>
</span>
<span class="ribbon top-left ribbon-warning">
<small>warning</small>
</span>
<span class="ribbon bottom-right ribbon-warning">
<small>warning</small>
</span>
<span class="ribbon bottom-left ribbon-warning">
<small>warning</small>
</span>
<div class="icon">
<i class="fa fa-html5 fa-4x"></i>
</div>
<code>.ribbon-warning</code>
</div>
</li>
<li>
<div class="content">
<span class="ribbon top-right ribbon-danger">
<small>danger</small>
</span>
<span class="ribbon top-left ribbon-danger">
<small>danger</small>
</span>
<span class="ribbon bottom-right ribbon-danger">
<small>danger</small>
</span>
<span class="ribbon bottom-left ribbon-danger">
<small>danger</small>
</span>
<div class="icon">
<i class="fa fa-css3 fa-4x"></i>
</div>
<code>.ribbon-danger</code>
</div>
</li>
</ul>
</div>
</body>
</html>
12. END by Catt
Made by Katy DeCorah. Source


<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
*,
*:before,
*:after {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
transform: translate3d(0, 0, 0);
background: #f4f4f4;
font-family: "Roboto", sans-serif;
}
.ribbon {
background: #4b9ae5;
display: inline-block;
color: #f4f4f4;
padding: 0.5em 0.7em;
font-weight: 900;
letter-spacing: 0.2em;
position: relative;
font-size: 2.5em;
text-transform: uppercase;
transform-style: preserve-3d;
transform: rotate(-20deg) skew(-20deg, 10deg);
}
.ribbon:before, .ribbon:after {
content: "";
width: 0;
height: 2em;
display: block;
background: #4993da;
position: absolute;
border-style: solid;
border-width: 0.5em;
z-index: -1;
transform: translateZ(-1em);
}
.ribbon:before {
left: -0.5em;
top: 0.5em;
border-color: #358de2 #1d74c7 #358de2 #358de2;
}
.ribbon:after {
right: -0.5em;
top: -0.5em;
border-color: #358de2 #358de2 #358de2 #1d74c7;
}
</style>
</head>
<body>
<div class='ribbon' contenteditable='true'>-end-</div>
</body>
</html>
13. Simple Pure CSS Ribbon
Made by Bahadır Tezer. Source


<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
body {
background: url("https://i.imgur.com/jNZpSAx.png") repeat #dedede;
}
#wrapper {
margin: 50px auto;
width: 400px;
height:100px;
}
.ribbon {
width: 300px;
position: absolute;
text-align: center;
font-size: 20px!important;
background: #d64b4b;
background: -webkit-gradient(linear, left top, left bottom, from(#d64b4b), to(#ab2c2c));
background: -webkit-linear-gradient(top, #d64b4b, #ab2c2c);
background: -moz-linear-gradient(top, #d64b4b, #ab2c2c);
background: -ms-linear-gradient(top, #d64b4b, #ab2c2c);
background: -o-linear-gradient(top, #d64b4b, #ab2c2c);
background-image: -ms-linear-gradient(top, #d64b4b 0%, #ab2c2c 100%);
-webkit-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
-moz-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
font-family: 'Helvetica Neue',Helvetica, sans-serif;
}
.ribbon h1 {
font-size: 25px!important;
color: #801111;
text-shadow: #d65c5c 0 1px 0;
margin:0px;
padding: 15px 10px;
}
.ribbon:before, .ribbon:after {
content: '';
position: absolute;
display: block;
bottom: -1em;
border: 1.5em solid #c23a3a;
z-index: -1;
}
.ribbon:before {
left: -2em;
border-right-width: 1.5em;
border-left-color: transparent;
-webkit-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px;
-moz-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px;
box-shadow: rgba(000,000,000,0.4) 1px 1px 1px;
}
.ribbon:after {
right: -2em;
border-left-width: 1.5em;
border-right-color: transparent;
-webkit-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px;
-moz-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px;
box-shadow: rgba(000,000,000,0.4) -1px 1px 1px;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
border-color: #871616 transparent transparent transparent;
position: absolute;
display: block;
border-style: solid;
bottom: -1em;
content: '';
}
.ribbon .ribbon-content:before {
left: 0;
border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
right: 0;
border-width: 1em 1em 0 0;
}
.ribbon-stitches-top {
margin-top:2px;
border-top: 1px dashed rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5);
}
.ribbon-stitches-bottom {
margin-bottom:2px;
border-top: 1px dashed rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.3);
}
</style>
</head>
<body>
<div id="wrapper"><div class="ribbon"><div class="ribbon-stitches-top"></div><strong class="ribbon-content"><h1>A Pure CSS Ribbon</h1></strong><div class="ribbon-stitches-bottom"></div></div></div>
</body>
</html>