.ribbon {
	position: absolute;
	z-index: 100;
	overflow: hidden;
	width: 75px; height: 75px;
	text-align: right;
}
.ribbon.top-left {
	left: -5px; top: -5px;
}
.ribbon.top-right {
	right: -5px; top: -5px;
}
.ribbon.bottom-left {
	left: -5px; bottom: -5px;
}
.ribbon.bottom-right {
	right: -5px; bottom: -5px;
}

.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  width: 100px;
  display: block;
  position: absolute;
}
.ribbon.top-left span {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  top: 19px; left: -21px;
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
}
.ribbon.top-right span {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  top: 19px; right: -21px;
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
}
.ribbon.bottom-left span {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  bottom: 19px; left: -21px;
  box-shadow: 0px -2px 10px -6px rgba(0, 0, 0, 1);
}
.ribbon.bottom-right span {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  bottom: 19px; right: -21px;
  box-shadow: 0px -2px 10px -6px rgba(0, 0, 0, 1);
}

.ribbon.red span {
	background: #8F0808;
	background: linear-gradient(#F70505 0%, #8F0808 100%);
} 
.ribbon.green span{
	background: #79A70A;
	background: linear-gradient(#9BC90D 0%, #79A70A 100%);
}
.ribbon.blue span{
	background: #79A70A;
	background: linear-gradient(#2989d8 0%, #1e5799 100%);
}
.ribbon.gold span {
	background: #8F0808;
	background: linear-gradient(#F79E05 0%, #8F5408 100%);
	
} 

/* corner before top-right, top-left, bottom-right, bottom-left */
.ribbon span::before {
	content: "";
	z-index: -1;
	position: absolute;
}
.ribbon.top-right span::before {
	 left: 0px; top: 100%;
}
.ribbon.top-left span::before {
	left: 0px; top: 100%;
}
.ribbon.bottom-right span::before {
	left: 0px; bottom: 100%;
}
.ribbon.bottom-left span::before {
	left: 0px; bottom: 100%;
}

.ribbon.top-right.red span::before {
	border-left: 3px solid #8F0808;
	border-right: 3px solid transparent;
	border-bottom: 3px solid transparent;
	border-top: 3px solid #8F0808;
}
.ribbon.top-right.green span::before {
	border-left: 3px solid #79A70A;
	border-right: 3px solid transparent;
	border-bottom: 3px solid transparent;
	border-top: 3px solid #79A70A;
}
.ribbon.top-right.blue span::before {
	border-left: 3px solid #1e5799;
	border-right: 3px solid transparent;
	border-bottom: 3px solid transparent;
	border-top: 3px solid #1e5799;
}
.ribbon.top-right.gold span::before {
	border-left: 3px solid #8F5408;
	border-right: 3px solid transparent;
	border-bottom: 3px solid transparent;
	border-top: 3px solid #8F5408;
}

.ribbon.top-left.red span::before {
	border-left: 3px solid #8F0808;
	border-right: 3px solid transparent;
	border-bottom: 3px solid transparent;
	border-top: 3px solid #8F0808;
}
.ribbon.top-left.green span::before {
	border-left: 3px solid #79A70A;
	border-right: 3px solid transparent;
	border-bottom: 3px solid transparent;
	border-top: 3px solid #79A70A;
}
.ribbon.top-left.blue span::before {
	border-left: 3px solid #1e5799;
	border-right: 3px solid transparent;
	border-bottom: 3px solid transparent;
	border-top: 3px solid #1e5799;
}
.ribbon.top-left.gold span::before {
	border-left: 3px solid #8F5408;
	border-right: 3px solid transparent;
	border-bottom: 3px solid transparent;
	border-top: 3px solid #8F5408;
}

.ribbon.bottom-left.red span::before {
	border-left: 3px solid #F70505;
	border-right: 3px solid transparent;
	border-bottom: 3px solid #F70505;
	border-top: 3px solid transparent;
}
.ribbon.bottom-left.green span::before {
	border-left: 3px solid #9BC90D;
	border-right: 3px solid transparent;
	border-bottom: 3px solid #9BC90D;
	border-top: 3px solid transparent;
}
.ribbon.bottom-left.blue span::before {
	border-left: 3px solid #2989d8;
	border-right: 3px solid transparent;
	border-bottom: 3px solid #2989d8;
	border-top: 3px solid transparent;
}
.ribbon.bottom-left.gold span::before {
	border-left: 3px solid #F79E05;
	border-right: 3px solid transparent;
	border-bottom: 3px solid #F79E05;
	border-top: 3px solid transparent;
}

.ribbon.bottom-right.red span::before {
	border-left: 3px solid #F70505;
	border-right: 3px solid transparent;
	border-bottom: 3px solid #F70505;
	border-top: 3px solid transparent;
}
.ribbon.bottom-right.green span::before {
	border-left: 3px solid #9BC90D;
	border-right: 3px solid transparent;
	border-bottom: 3px solid #9BC90D;
	border-top: 3px solid transparent;
}
.ribbon.bottom-right.blue span::before {
	border-left: 3px solid #2989d8;
	border-right: 3px solid transparent;
	border-bottom: 3px solid #2989d8;
	border-top: 3px solid transparent;
}
.ribbon.bottom-right.gold span::before {
	border-left: 3px solid #F79E05;
	border-right: 3px solid transparent;
	border-bottom: 3px solid #F79E05;
	border-top: 3px solid transparent;
}

/* corners */
.ribbon span::after {
  content: "";
  position: absolute;
  z-index: -1;
}
.ribbon.top-right span::after {
	right: 0px; top: 100%;
}
.ribbon.top-left span::after {
	right: 0px; top: 100%;
}
.ribbon.bottom-right span::after {
	right: 0px; bottom: 100%;
}
.ribbon.bottom-left span::after {
	right: 0px; bottom: 100%;
}

.ribbon.top-right.red span::after {
	border-left: 3px solid transparent;
	border-right: 3px solid #8F0808;
	border-bottom: 3px solid transparent;
	border-top: 3px solid #8F0808;
}
.ribbon.top-right.green span::after {
	border-left: 3px solid transparent;
	border-right: 3px solid #79A70A;
	border-bottom: 3px solid transparent;
	border-top: 3px solid #79A70A;
}
.ribbon.top-right.blue span::after {
	border-left: 3px solid transparent;
	border-right: 3px solid #1e5799;
	border-bottom: 3px solid transparent;
	border-top: 3px solid #1e5799;
}
.ribbon.top-right.gold span::after {
	border-left: 3px solid transparent;
	border-right: 3px solid #8F5408;
	border-bottom: 3px solid transparent;
	border-top: 3px solid #8F5408;
}

.ribbon.top-left.red span::after {
	border-left: 3px solid transparent;
	border-right: 3px solid #8F0808;
	border-bottom: 3px solid transparent;
	border-top: 3px solid #8F0808;
}
.ribbon.top-left.green span::after {
	border-left: 3px solid transparent;
	border-right: 3px solid #79A70A;
	border-bottom: 3px solid transparent;
	border-top: 3px solid #79A70A;
}
.ribbon.top-left.blue span::after {
	border-left: 3px solid transparent;
	border-right: 3px solid #1e5799;
	border-bottom: 3px solid transparent;
	border-top: 3px solid #1e5799;
}
.ribbon.top-left.gold span::after {
	border-left: 3px solid transparent;
	border-right: 3px solid #8F5408;
	border-bottom: 3px solid transparent;
	border-top: 3px solid #8F5408;
}

.ribbon.bottom-right.red span::after {
	border-left: 3px solid transparent;
	border-right: 3px solid #F70505;
	border-bottom: 3px solid #F70505;
	border-top: 3px solid transparent;
}
.ribbon.bottom-right.green span::after {
	border-left: 3px solid transparent;
	border-right: 3px solid #9BC90D;
	border-bottom: 3px solid #9BC90D;
	border-top: 3px solid transparent;
}
.ribbon.bottom-right.blue span::after {
	border-left: 3px solid transparent;
	border-right: 3px solid #2989d8;
	border-bottom: 3px solid #2989d8;
	border-top: 3px solid transparent;
}
.ribbon.bottom-right.gold span::after {
	border-left: 3px solid transparent;
	border-right: 3px solid #F79E05;
	border-bottom: 3px solid #F79E05;
	border-top: 3px solid transparent;
}

.ribbon.bottom-left.red span::after {
	border-left: 3px solid transparent;
	border-right: 3px solid #F70505;
	border-bottom: 3px solid #F70505;
	border-top: 3px solid transparent;
}
.ribbon.bottom-left.green span::after {
	border-left: 3px solid transparent;
	border-right: 3px solid #9BC90D;
	border-bottom: 3px solid #9BC90D;
	border-top: 3px solid transparent;
}
.ribbon.bottom-left.blue span::after {
	border-left: 3px solid transparent;
	border-right: 3px solid #2989d8;
	border-bottom: 3px solid #2989d8;
	border-top: 3px solid transparent;
}
.ribbon.bottom-left.gold span::after {
	border-left: 3px solid transparent;
	border-right: 3px solid #F79E05;
	border-bottom: 3px solid #F79E05;
	border-top: 3px solid transparent;
}