.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; }
<div class="non-semantic-protector"> <h1 class="ribbon"> <strong class="ribbon-content">RED RIBBON</strong> </h1> </div>
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.