corner-split.html (1075B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style type="text/css"> 5 #borders, .cover { 6 position: absolute; 7 top: 0px; 8 left: 0px; 9 } 10 #borders { 11 width: 50px; 12 height: 25px; 13 border-radius: 75px; 14 border-top: 50px solid red; 15 border-bottom: 100px solid blue; 16 border-left: 25px solid green; 17 border-right: 100px solid black; 18 } 19 </style> 20 </head> 21 <body> 22 <div id="borders"></div> 23 <svg width="178" height="178" class="cover"> 24 <rect x="0" y="0" width="175" height="175" rx="75" ry="75" fill="none" stroke="orange" stroke-width="3" /> 25 <line x1="145" y1="15" x2="75" y2="50" stroke="orange" stroke-width="3" /> 26 <line x1="153.033004761" y1="153.033004761" x2="75" y2="75" stroke="orange" stroke-width="3" /> 27 <line x1="9.580468178" y1="136.678131104" x2="25" y2="75" stroke="orange" stroke-width="3" /> 28 <line x1="15.000000954" y1="30.000001907" x2="31.386978149" y2="62.773956299" stroke="orange" stroke-width="3" /> 29 <path d="M75,50 L75,75 L25,75 A50,25 0 0,1 75,50" fill="none" stroke="orange" stroke-width="3" /> 30 </svg> 31 </body> 32 </html>