Ribbon Example

HTML

<div class="container">
    <div class="ribbon blue"></div>
    <div class="ribbon red"></div>
    <div class="ribbon green"></div>
    <div class="ribbon orange"></div>
</div>

SCSS

$ribbonHeight: 46px;

@mixin ribbon-color($color) {
    background:$color;
    &:after {
        border-color: saturate(darken($color, 7.6%), -4%);
        border-bottom-color:transparent;
    }
    &:before {
        border-color: saturate(darken($color, 7.6%), -4%);
        border-top-color:transparent;
    }
}

.ribbon {
    display:inline-block;
    height: 46px;
    margin:0 -22px;
    position:relative;
    width: 185px;
    -webkit-transform: rotate(-53deg) skew(-24deg);
    
    &:before, &:after {
        border:25px solid;
        border-top-width:22px;
        border-bottom-width:22px;
        content:"";
        display:block;
        position:absolute;
        width:0;
        height:0;
    }
        
    &:after {
        border-bottom-color:transparent;
        margin:3px 0 0;
        top:100%;
        left:11px;
        -webkit-transform:  skew(22deg)
    }
        
    &:before {
        border-top-color:transparent;
        margin:0 0 3px;
        bottom:100%;
        right:11px;
        -webkit-transform:  skew(22deg)
    }
    
    @include ribbon-color(#eee);
}

.ribbon.blue {
    @include ribbon-color(#048db5)
}
.ribbon.red {
    @include ribbon-color(#cf3f3f)
}
.ribbon.green {
    @include ribbon-color(#9eab03)
}
.ribbon.orange {
    @include ribbon-color(#d67c04)
}



/* Page setup */
html { 
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAFVBMVEXo6Oj////09PT29vb39/f19fXz8/MCHHPWAAAAu0lEQVR42jWPQQ7AQAgCXRD+/+SOhzbZakYgOm9ipfdqVzFIb3az8Zp/u/M6awaF8+wUZmR9U21Vo4dlUR7FmV3hTZko2rxxXMMWQ8aXD1Wsy0OuuTBkp52npN2ORFmxGXnuCjytrJAxc1N62qztFi8JWkz0dS3DvG+QFis1DeyG0AbthO/227i6zdAeNLugLhhtsMvoUuaploSVUcK8ZMF7F0dzea4V3/E4yJ1jKhcziqr+t/m0idSrfh952AV+aoEwyQAAAABJRU5ErkJggg==");
    height:100%; 
    box-shadow: inset 0 0 90px rgba(127,127,127,.16);
    height:100%;
}
.container {
    margin:300px auto 0;
    text-align:center;
    width:800px;
}