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

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