<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="ribbon ribbon-top-left"><span>NYHED</span></div>

.ribbon-top-left { top: -10px; left: -10px; } .ribbon { width: 150px; height: 150px; overflow: hidden; position: absolute; } .ribbon-top-left::before { top: 0; right: 0; } .ribbon-top-left::before { top: 0px; right: 56px; } .ribbon-top-left::before, .ribbon-top-left::after { border-top-color: transparent; border-left-color: transparent; } .ribbon::before, .ribbon::after { position: absolute; z-index: -1; content: ''; display: block; border: 5px solid #C9422C; } .ribbon-top-left span { right: 38px; top: 23px; transform: rotate(-45deg); } .ribbon span { position: absolute; display: block; width: 150px; padding: 7px 0; background-color: #C9422C; box-shadow: 0 5px 10px rgba(0,0,0,.1); color: #fff; font: 700 18px/1 'Lato', sans-serif; text-shadow: 0 1px 1px rgba(0,0,0,.2); text-transform: uppercase; text-align: center; font-size: 14px; } .ribbon-top-left::after { bottom: 56px; left: -1px; }