table-section-paint-htb-ltr-ref.html (1035B)
1 <!DOCTYPE html> 2 <style> 3 .multicol { 4 inline-size: 400px; 5 block-size: 100px; 6 columns: 4; 7 column-fill: auto; 8 gap: 0; 9 } 10 .pattern { 11 background: repeating-linear-gradient(orange, orange 30px, dodgerblue 30px, dodgerblue 60px); 12 } 13 </style> 14 <div class="multicol"> 15 <div style="position: relative; inline-size: 100%; block-size: 400px;"> 16 <div style="position: absolute; inset-block-start: 0; inline-size: 100%; background: red; block-size: 50px;"></div> 17 <div class="pattern" style="position: absolute; inset-block-start: 60px; inset-inline-start: 10px; inline-size: calc(100% - 20px); block-size: 255px;"></div> 18 <div style="position: absolute; inset-block-start: 170px; inline-size: 100%; block-size: 10px; background: white;"></div> 19 <div style="position: absolute; inset-block-start: 60px; inset-inline-start: 45px; inline-size: 10px; block-size: 255px; background: white;"></div> 20 <div style="position: absolute; inset-block-end: 0; inline-size: 100%; background: red; block-size: 75px;"></div> 21 </div> 22 </div>