.ribbon {
    margin: 0;
    padding: 0;
    background: rgb(180, 180, 180);
    color: white;
    padding: 0.3em 0;
    position: absolute;
    z-index: 100;
    top: 0;
    right: 0;
    transform: translateX(30%) translateY(0%) rotate(45deg);
    transform-origin: top left;
}

.ribbon:before,
.ribbon:after {
    content: '';
    position: absolute;
    top: 0;
    margin: 0 -1px;
    /* tweak */
    width: 100%;
    height: 100%;
    background: rgb(180, 180, 180);
}

.ribbon:before {
    right: 100%;
}

.ribbon:after {
    left: 100%;
}