.ribbon2 { position: absolute; right: -5px; top: -5px; z-index: 1; overflow: hidden; width: 75px; height: 75px; text-align: left; } .ribbon2 span { font-size: 10px; color: #fff; text-transform: uppercase; text-align: center; font-weight: bold; line-height: 20px; transform: rotate(45deg); -webkit-transform: rotate(45deg); /* Needed for Safari */ width: 100px; display: block; background: #534a5e; background: linear-gradient(#9BC90D 0%, #534a5e 100%); box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); position: absolute; top: 19px; left: -21px; } .ribbon2 span::before { content: ''; position: absolute; left: 0px; top: 100%; z-index: -1; border-left: 3px solid #534a5e; border-right: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid #534a5e; } .ribbon2 span::after { content: ''; position: absolute; right: 0%; top: 100%; z-index: -1; border-right: 3px solid #534a5e; border-left: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid #534a5e; }