Gcyrillus, some US touch with these classics ribbon

dabblet.css

/* Gcyrillus, some US touch with these classics ribbon */
html {
background: #f06;
background: linear-gradient(45deg, #f50,#180,#09f ,#def, #ace,#ff0);
min-height: 100%;
}
body{
transform-style:preserve-3d;
perspective:500px;
}
code {color:#6eA;font-size:1.2em;font-weight:bold;text-shadow:1px 1px 1px #333}
ul {display:table;margin:3em auto ;padding:0;
background:#f06;
position:relative;height:2em;
transform:rotateX(25deg) scale(1.2);
transform-style:preserve-3d;
perspective:500px;
box-shadow:2px 2px 20px   rgba(0,0,0,0.3);}
ul#ribbon1,ul.ribbon3 {
transform:rotateX(-25deg) scale(1.8);
}
li {display:inline-block;margin:0;line-height:2em;background:#f06;height:2em;padding:0 1em;}
ul:not([class="plain"]):before, ul:not([class="plain"]):after  {
content:'';
line-height:0;
height:0;padding:0; 
border:solid 1em #f06;
position:absolute;
top:1em;
left:-1.5em;
z-index:-1;
border-right-color:gray;
border-bottom-width:1em;
border-left-width:1.5em
}
ul#ribbon1:after ,  ul.ribbon3:after{
left:auto;
right:-1.5em;
border-right-color:#f06;
border-right-width:1.5em;
border-left-color:gray;
}
ul.ribbon2:after {
left:auto;
right:-1.4em;
top:-1em;
border-right-color:#f06;
border-right-width:1.5em;
border-left-color:gray;
}
ul.ribbon3:before {
top:-1em;
}
ul.transparent:after  {border-color:transparent!important; border-left-color:gray!important;}
ul.transparent:before {border-color:transparent!important;border-right-color:gray!important;}

dabblet.html

<ul class="plain" >
<li> <code> ul.plain</code></li><li> item </li><li> item </li><li> item </li><li> item </li>
</ul>
<ul id="ribbon1">
<li> <code>#ribbon1</code> </li><li> item </li><li> item </li><li> item </li><li> item </li>
</ul>
<ul class="ribbon2">
<li> <code>.ribbon2</code> </li><li> item </li><li> item </li><li> item </li><li> item </li>
</ul>
<ul class="ribbon3">
<li> <code>.ribbon3</code> </li><li> item </li><li> item </li><li> item </li><li> item </li>
</ul>
<ul class="plain" >
<li> <code> ul.plain</code></li><li> item </li><li> item </li><li> item </li><li> item </li>
</ul>
<ul id="ribbon1" class="transparent">
<li> <code>#ribbon1</code> </li><li> item </li><li> item </li><li> item </li><li> item </li>
</ul>
<ul class="ribbon2 transparent">
<li> <code>.ribbon3</code> </li><li> item </li><li> item </li><li> item </li><li> item </li>
</ul>
<ul class="ribbon3 transparent">
<li> <code>.ribbon3</code> </li><li> item </li><li> item </li><li> item </li><li> item </li>
</ul>

settings.json

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