How to Create a Ribbon using CSS

Submitted by Jeprox on Tuesday, January 26, 2016 - 13:57.

Language

In this tutorial we are going to learn how to make ribbon using CSS. You may play around with the CSS codes change the positions of the ribbon elements . Here's the code: CSS Code:

.ribbon {
		font-size: 16px !important;
		width: 300px;
		position: relative;
		background: #C50F0F;
		color: #fff;
		text-align: center;
		padding: 1em 2em; 
		margin: 2em auto 3em; 
		}
		.ribbon:before, .ribbon:after {
		content: "";
		position: absolute;
		display: block;
		bottom: -1em;
		border: 1.5em solid #B41111;
		z-index: -1;
		}
		.ribbon:before {
		left: -2em;
		border-right-width: 1.5em;
		border-left-color: transparent;
		}
		.ribbon:after {
		right: -2em;
		border-left-width: 1.5em;
		border-right-color: transparent;
		}
		.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
		content: "";
		position: absolute;
		display: block;
		border-style: solid;
		border-color: #804f7c transparent transparent transparent;
		bottom: -1em;
		}
		.ribbon .ribbon-content:before {
		left: 0;
		border-width: 1em 0 0 1em;
		}
		.ribbon .ribbon-content:after {
		right: 0;
		border-width: 1em 1em 0 0;
		}
		.non-semantic-protector { position: relative; z-index: 1; }

HTML Code:

 
	
		RED RIBBON

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

179 views