Beemuse Ribbons
Ribbon Left In
Ribbon Both In
Ribbon Right In
Ribbon Left Out
Ribbon Both Out
Ribbon Right Out
Usage
Use with text or links. Verbose HTML is required for stitches + tails, otherwise
we'd use one HTML element. More pseudo-elements would also help! HTML varies for
placement of tails and chaining. Use with <p>
or
<a>
elements.
No IE7 support (no :before or :after pseudo-elements). As yet untested in IE8-10.
Credit: homebrewed after studying many variations
HTML
<div class="ribbon ribbon-left ribbon-in"> <div class="ribbon-stitch"> <div class="ribbon-fabric"><p>...</p></div> <div class="ribbon-top-left"></div> <div class="ribbon-bottom-left"></div> </div> </div> <div class="ribbon ribbon-both ribbon-in"> <div class="ribbon-stitch"> <div class="ribbon-fabric"><p>...</p></div> <div class="ribbon-top-right"></div> <div class="ribbon-bottom-right"></div> <div class="ribbon-top-left"></div> <div class="ribbon-bottom-left"></div> </div> </div> <div class="ribbon ribbon-both ribbon-set ribbon-in-out"> <div class="ribbon-stitch"> <div class="ribbon-fabric"><a>...</a></div> <div class="ribbon-top-left"></div> <div class="ribbon-bottom-left"></div> <div class="ribbon-center-right"></div> </div> </div>
Code licensed under the MIT License