Right corner ribbon on a div CSS

Question

I am trying to make a corner ribbon in a div and its going everywhere I want it to look neat and nice it goes over the div and does not sit well.

Answer 1

Try this Demo

.corner - ribbon {
    width: 100 px;
    background: #e43;
    position: absolute;
    text - align: center;
    line - height: 50 px;
    letter - spacing: 1 px;
    color: #f0f0f0;
    transform: rotate(45 deg); - webkit - transform: rotate(45 deg);
    overflow: hidden;
    right: 0;
    top: 1.7e m;
}

.corner - ribbon.shadow {
    box - shadow: 0 0 3 px rgba(0, 0, 0, .3);
}

/* Different positions */

.corner - ribbon.blue {
        background: #39d;}
.large-4{
    position: relative;    
}