CSS ribbon

dabblet.css

/* CSS ribbon

  http://stackoverflow.com/questions/14928021/css-how-to-make-edgy-corners-with-css
  
*/


body{
    background: #333;
}

.box{
    background: #666;
    background: -moz-radial-gradient(center, ellipse cover, rgba(125,126,125,1) 3%, rgba(14,14,14,1) 100%);
    background: -webkit-radial-gradient(center, ellipse cover, rgba(125,126,125,1) 3%,rgba(14,14,14,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(125,126,125,1) 3%,rgba(14,14,14,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(125,126,125,1) 3%,rgba(14,14,14,1) 100%);
    background: radial-gradient(ellipse at center, rgba(125,126,125,1) 3%,rgba(14,14,14,1) 100%);   
    border: 10px solid #fff;
    box-shadow: 0px 0px 40px #000;
    width: 400px;
    height: 400px;
    margin: 10px 80px;
    position: relative;
}

.ribbon{
    background: #FFA500;
    background: -moz-linear-gradient(top, rgba(255,175,75,1) 0%, rgba(255,146,10,1) 100%);   
    background: -webkit-linear-gradient(top, rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%);
    background: -o-linear-gradient(top, rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%);
    background: linear-gradient(to bottom, rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%);
    border-top: 1px solid #FFB759;
    position: absolute;
    width: 100%;
    top: 20px;
    left: -40px;
    height: 60px;
    padding-right: 50px;
}

.ribbon::before{
    content: '';
    position: absolute;
    left: 0px;
    top: 60px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 40px 20px 0;
    border-color: transparent rgba(255,146,10,0.85) transparent transparent;    
    z-index: -5;
}

dabblet.html

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

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}