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). IE9+ (graceful IE8 fallback without "tails").

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>

Designed and built with all the buzz in the world @itmustbe

Code licensed under the MIT License