Hii,
 In this blog i am going to create a pure CSS ribbon or strip which can be used to display some important information,link etc with highlighted, eyecatching view on a webpage.
While we create  any ribbon or strip design we must use eyecatching background colors,border-colors etc because whatever is written on that strip (some important or new text, link) should be eye-catching.

Here's the example given below,go through it.

CSS:
 

.box {
 width: 200px; height: 300px;
 position: relative;
 border: 1px solid #BBB;
 background: #EEE;
}
.ribbon {
 position: absolute;
 left: -5px; top: -5px;
 z-index: 1;
 overflow: hidden;
 width: 75px; height: 75px;
 text-align: right;
}
.ribbon span {
 font-size: 10px;
 font-weight: bold;
 color: #FFF;
 text-transform: uppercase;
 text-align: center;
 line-height: 20px;
 transform: rotate(-45deg);
 -webkit-transform: rotate(-45deg);
 width: 100px;
 display: block;
 background: #79A70A;
 background: linear-gradient(#801111 0%, #CC2316 100%);
 box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
 position: absolute;
 top: 19px; left: -21px;
}
.ribbon span::before {
 content: "";
 position: absolute; left: 0px; top: 100%;
 z-index: -1;
 border-left: 3px solid #CC2316;
 border-right: 3px solid transparent;
 border-bottom: 3px solid transparent;
 border-top: 3px solid #CC2316;
}
.ribbon span::after {
 content: "";
 position: absolute; right: 0px; top: 100%;
 z-index: -1;
 border-left: 3px solid transparent;
 border-right: 3px solid #CC2316;
 border-bottom: 3px solid transparent;
 border-top: 3px solid #CC2316;
}

HTML:

<div class="box">
 <div class="ribbon"><span>NEW</span></div>
</div>