Ribbon CSS Test..

by rgthree

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae nibh eros, id cursus urna. Ut non massa sed dui faucibus porta id id nisl. Nulla vel consectetur erat. Maecenas id ipsum sit amet lacus tincidunt semper auctor id risus. Nulla orci est, varius quis cursus eu, pellentesque et magna. Aenean at est purus, nec gravida tortor. Mauris consequat purus vel dolor vestibulum eu vestibulum purus rhoncus. Donec eget gravida purus. Curabitur in augue dolor. Donec ornare ligula non est fringilla blandit. Ut tristique, nibh malesuada dapibus sodales, diam turpis viverra lectus, euismod tincidunt justo risus id elit. Nullam tristique tincidunt enim, sed posuere nunc ultricies suscipit. Quisque quis tortor eu odio faucibus faucibus at id libero. Vestibulum porttitor sagittis ornare. Nunc mattis bibendum dolor nec interdum. Curabitur diam dolor, condimentum nec bibendum ut, suscipit in odio.</p>

CSS

body {background:#FAFAFA; font-family:sans-serif;}
p {position:relative; margin:25px auto; width:250px; box-shadow:0px 2px 8px rgba(0,0,0,0.66); padding:25px; line-height:1.4;}

p:after {
    content:"\0200"; font-size:0px; display:block;
    position:absolute; top:-2px; left:10px; z-index:1;
    width:50px; height:80px; margin:auto;
    background:-webkit-repeating-linear-gradient(top, rgba(0,0,0,0.5) 0px, rgba(0,0,0,0.5) 1px, transparent 1px, transparent 2px), -webkit-linear-gradient(top, rgba(255,255,255,0.25), rgba(0,0,0,0.15)), #B00;
    background-size:4px, 100%;
    box-shadow:inset 0px 0px 2px rgba(255,255,255,0.6), 0px 2px 4px rgba(0,0,0,0.5);
}
/*
p:before {
    content:"\0200"; font-size:0px; display:block;
    position:absolute; top:78px; left:10px; z-index:1;
    width:0px;
    border:0px solid transparent; border-width:0px 25px 25px 25px;
    border-left-color:#900;
    border-right-color:#900;
}
*/
div {
    position:relative; width:100px; height:250px; margin:auto;
    background-color:#B00;
    background:-webkit-repeating-linear-gradient(top, rgba(0,0,0,0.5) 0px, rgba(0,0,0,0.5) 1px, transparent 1px, transparent 2px), -webkit-linear-gradient(top, rgba(255,255,255,0.25), rgba(0,0,0,0.15)), #B00;
    background-size:1px, 100%;
    /*border:2px solid #B00;*/
    box-shadow:inset 0px 0px 2px rgba(255,255,255,0.6), 0px 4px 8px rgba(0,0,0,0.5);
    border-radius:2px;
}
div:before, div:after{
    content:"\0200"; font-size:0px; display:block;
    position:absolute; top:0px; left:1px; right:1px;  bottom:1px; z-index:1;
    border:1px solid rgba(0,0,0,0.6);
    border-top:0px;
}
div:after{
   left:2px; right:2px; bottom:2px;
    border-color:gold
}
/*
div:after {
    content:"\0200"; font-size:0px; display:block;
    border:0px solid transparent; border-width:0px 60px 60px 60px;
    border-bottom-color:#FFF;
    position:absolute; bottom:-10px; left:-10px; right:-10px;
}
*/