collapsed-border-large-cell-ref.html (1642B)
1 <!DOCTYPE html> 2 <style> 3 body { 4 --bluetrans: rgba(0,0,255,0.5); 5 --yellowtrans: rgba(255,255, 0, 0.5); 6 --orangetrans: rgba(255,165,0,0.5); 7 --greentrans: rgba(0,255,0, 0.5); 8 } 9 body * { 10 box-sizing: border-box; 11 } 12 #container > * { 13 position:absolute; 14 } 15 </style> 16 <div id="container" style="position:relative;width:200px;height:200px"> 17 <!-- blues --> 18 <div style="width:56px;height:150px;background:var(--bluetrans);border: 6px solid blue;border-bottom:none;"></div> 19 <div style="width:56px;height:56px;top:150px;background:var(--bluetrans);border-left: 6px solid blue;border-bottom:6px solid blue;"></div> 20 <!-- green --> 21 <div style="width:94px;height:55px;top:51px;left:56px;background:var(--greentrans);border-top:4px solid green;"></div> 22 <div style="width:99px;height:44px;top:106px;left:56px; 23 background:var(--greentrans);border-right:4px solid green;"></div> 24 <!-- yellow --> 25 <div style="width:56px;height:56px;top:50px;left:150px;background:var(--yellowtrans);border:6px solid yellow"></div> 26 <!-- orange --> 27 <div style="width:156px;height:56px;top:150px;left:50px;background:var(--orangetrans);border: 6px solid orange"></div> 28 <!-- transparent --> 29 <div style="width:48px;height:49px;top:2px;left:56px;border-top: 2px solid black;border-right:2px solid black"></div> 30 <div style="width:50px;height:48px;top:2px;left:104px;border-top: 2px solid black;border-right:2px solid black"></div> 31 <div style="width:50px;height:48px;top:2px;left:154px;border-top: 2px solid black;border-right:2px solid black"></div> 32 <div style="width:50px;height:44px;top:106px;left:154px;border-right:2px solid black"></div> 33 </div>