CSS-эксперименты

div.cont {
 width:50%;
 margin: 20px auto;
 text-align:center;
 min-width:400px;
}
 
div.c1, div.c2, div.c3, div.c4, div.c5, div.c6, div.c7, div.c8, div.c9, div.c10, div.c11, div.c12, div.c13, div.c14, div.c15, div.c16  {
 border:solid #FFF;
}
 
div.c1, div.c3, div.c5, div.c7, div.c9, div.c11, div.c13, div.c15   {
 border-left:solid #44CA31;
 border-right:solid #44CA31;
 border-bottom:solid #FB7D00;
 border-top:solid #FB7D00;
}
 
div.c2, div.c4, div.c6, div.c8, div.c10, div.c12, div.c14, div.c16   {
 border-bottom:solid #832110;
 border-top:solid #832110;
 border-left:solid #44CA31;
 border-right:solid #44CA31;
}
 
div.c1 {	border-width:1px 16px; }
div.c2 {	border-width:2px 15px; }
div.c3 {	border-width:3px 14px; }
div.c4 {	border-width:4px 13px; }
div.c5 {	border-width:5px 12px; }
div.c6 {	border-width:6px 11px; }
div.c7 {	border-width:7px 10px; }
div.c8 {	border-width:8px 9px; }
div.c9 {	border-width:9px 8px; }
div.c10 {	border-width:10px 7px; }
div.c11 {	border-width:11px 6px; }
div.c12 {	border-width:12px 5px; }
div.c13 {	border-width:13px 4px; }
div.c14 {	border-width:14px 3px; }
div.c15 {	border-width:15px 2px; }
div.c16 {	border-width:16px 1px; }

<div class="cont">
 <div class="c16"><div class="c15"><div class="c14"><div class="c13"><div class="c12"><div class="c11"><div class="c10"><div class="c9"><div class="c8"><div class="c7"><div class="c6"><div class="c5"><div class="c4"><div class="c3"><div class="c2"><div class="c1">
 </div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
</div>
 
<div class="cont">
 <div class="c1"><div class="c2"><div class="c3"><div class="c4"><div class="c5"><div class="c6"><div class="c7"><div class="c8"><div class="c9"><div class="c10"><div class="c11"><div class="c12"><div class="c13"><div class="c14"><div class="c15"><div class="c16">
 </div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
</div>

div.dont {
 margin: 20px 0;
 text-align:center;
}
 
div.d1, div.d2, div.d3, div.d4, div.d5, div.d6, div.d7, div.d8, div.d9, div.d10, div.d11, div.d12, div.d13, div.d14, div.d15, div.d16  {
 border:solid #FFF; 
}
 
div.d1, div.d3, div.d5, div.d7, div.d9, div.d11, div.d13, div.d15   {
 border-bottom:solid #44CA31;
}
 
div.d2, div.d4, div.d6, div.d8, div.d10, div.d12, div.d14, div.d16   {
 border-bottom:solid #28761D;
}
 
div.d1 {	border-width:1px 16px; }
div.d2 {	border-width:2px 15px; }
div.d3 {	border-width:3px 14px; }
div.d4 {	border-width:4px 13px; }
div.d5 {	border-width:5px 12px; }
div.d6 {	border-width:6px 11px; }
div.d7 {	border-width:7px 10px; }
div.d8 {	border-width:8px 9px; }
div.d9 {	border-width:9px 8px; }
div.d10 {	border-width:10px 7px; }
div.d11 {	border-width:11px 6px; }
div.d12 {	border-width:12px 5px; }
div.d13 {	border-width:13px 4px; }
div.d14 {	border-width:14px 3px; }
div.d15 {	border-width:15px 2px; }
div.d16 {	border-width:16px 1px; }
 
div.d1, div.d2, div.d3, div.d4, div.d5, div.d6, div.d7, div.d8, div.d9, div.d10, div.d11, div.d12, div.d13, div.d14, div.d15, div.d16  {
 border-top-width:1px;
}

<div class="dont">
 <div class="d16"><div class="d15"><div class="d14"><div class="d13"><div class="d12"><div class="d11"><div class="d10"><div class="d9"><div class="d8"><div class="d7"><div class="d6"><div class="d5"><div class="d4"><div class="d3"><div class="d2"><div class="d1">Превед Медвед
 </div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
</div>
 
<div class="dont">
 <div class="d1"><div class="d2"><div class="d3"><div class="d4"><div class="d5"><div class="d6"><div class="d7"><div class="d8"><div class="d9"><div class="d10"><div class="d11"><div class="d12"><div class="d13"><div class="d14"><div class="d15">
 <div class="d16">Превед падонаг</div>
 </div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
</div>

div.eont {
 margin: 20px 0;
}
 
div.e1, div.e2, div.e3, div.e4, div.e5, div.e6, div.e7, div.e8, div.e9, div.e10, div.e11, div.e12, div.e13, div.e14, div.e15, div.e16  {
 border:dotted #308C22;
}
 
div.e1 {	border-width:2px; }
div.e2 {	border-width:4px; }
div.e3 {	border-width:6px; }
div.e4 {	border-width:8px; }
div.e5 {	border-width:10px; }
div.e6 {	border-width:12px; }
div.e7 {	border-width:14px; }
div.e8 {	border-width:16px; }
div.e9 {	border-width:18px; }
div.e10 {	border-width:20px; }
div.e11 {	border-width:22px; }
div.e12 {	border-width:24px; }
div.e13 {	border-width:26px; }
div.e14 {	border-width:28px; }
div.e15 {	border-width:30px; }
div.e16 {	border-width:32px; }

<div class="eont">
 <div class="e16"><div class="e15"><div class="e14"><div class="e13"><div class="e12"><div class="e11"><div class="e10"><div class="e9"><div class="e8"><div class="e7"><div class="e6"><div class="e5"><div class="e4"><div class="e3"><div class="e2"><div class="e1">
 </div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
</div>
 
<div class="eont">
 <div class="e1"><div class="e2"><div class="e3"><div class="e4"><div class="e5"><div class="e6"><div class="e7"><div class="e8">
 </div></div></div></div></div></div></div></div>
</div>