.ribbon { margin: 0; padding: 0; background: #27AE60; color:white; padding:1em 0; position: absolute; 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; width: 100%; height: 100%; background: #27AE60; } .ribbon:before { right:100%; } .ribbon:after { left:100%; }