rounded-clipped-border-ref.html (2587B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 4 <style> 5 .container { 6 float: left; 7 margin: 10px; 8 text-align: center; 9 inline-size: fit-content; 10 } 11 .multicol { 12 inline-size: 320px; 13 block-size: 120px; 14 border: solid; 15 background: lightgray; 16 } 17 .column { 18 float: left; 19 inline-size: 100px; 20 margin-inline-start: 10px; 21 } 22 .column:first-child { 23 margin-inline-start:0; 24 } 25 .clipper { 26 position: relative; 27 border-radius: 50px; 28 border: 20px solid blue; 29 overflow: clip; 30 background: red; 31 } 32 .clipper.part1 { 33 block-size: 100px; 34 border-block-end: none; 35 border-end-start-radius: 0; 36 border-end-end-radius: 0; 37 } 38 .clipper.part2 { 39 block-size: 120px; 40 border-block-start: none; 41 border-block-end: none; 42 border-radius: 0; 43 } 44 .clipper.part3 { 45 block-size: 80px; 46 border-block-start: none; 47 border-start-start-radius: 0; 48 border-start-end-radius: 0; 49 } 50 .child { 51 block-size: 300px; 52 background: yellow; 53 } 54 </style> 55 56 <p>In each figure there should be a yellow box with a rounded blue border around 57 it, split into three columns. There should be no red.</p> 58 59 <div class="container"> 60 horizontal-tb: 61 <div class="multicol"> 62 <div class="column"> 63 <div class="clipper part1"> 64 <div class="child"></div> 65 </div> 66 </div> 67 <div class="column"> 68 <div class="clipper part2"> 69 <div class="child"></div> 70 </div> 71 </div> 72 <div class="column"> 73 <div class="clipper part3"> 74 <div class="child"></div> 75 </div> 76 </div> 77 </div> 78 </div> 79 80 <div class="container"> 81 vertical-rl: 82 <div class="multicol" style="writing-mode:vertical-rl;"> 83 <div class="column"> 84 <div class="clipper part1"> 85 <div class="child"></div> 86 </div> 87 </div> 88 <div class="column"> 89 <div class="clipper part2"> 90 <div class="child"></div> 91 </div> 92 </div> 93 <div class="column"> 94 <div class="clipper part3"> 95 <div class="child"></div> 96 </div> 97 </div> 98 </div> 99 </div> 100 101 <div class="container"> 102 vertical-lr: 103 <div class="multicol" style="writing-mode:vertical-lr;"> 104 <div class="column"> 105 <div class="clipper part1"> 106 <div class="child"></div> 107 </div> 108 </div> 109 <div class="column"> 110 <div class="clipper part2"> 111 <div class="child"></div> 112 </div> 113 </div> 114 <div class="column"> 115 <div class="clipper part3"> 116 <div class="child"></div> 117 </div> 118 </div> 119 </div> 120 </div>