corner-joins-1-ref.xhtml (2498B)
1 <?xml version="1.0"?> 2 <html xmlns="http://www.w3.org/1999/xhtml" 3 xmlns:svg="http://www.w3.org/2000/svg"> 4 <head> 5 <title>border</title> 6 <style type="text/css"> 7 @namespace url("http://www.w3.org/1999/xhtml"); 8 @namespace svg url("http://www.w3.org/2000/svg"); 9 10 div.wrapper { 11 float: left; 12 margin-left: 20px; 13 margin-top: 10px; 14 } 15 16 div.cover, div.cover2 { 17 position: absolute; 18 border: 4px solid white; /* cover areas that may differ */ 19 width: 140px; 20 height: 118px; 21 border-radius: 63px; 22 margin-left: -2px; 23 margin-top: -2px; 24 } 25 div.cover2 { 26 height: 82px; 27 margin-top: 16px; 28 border-radius: 63px / 45px; 29 } 30 31 svg|svg { 32 display: block; 33 width: 146px; 34 height: 122px; 35 margin-right: -2px; 36 margin-bottom: 20px; 37 } 38 39 </style> 40 </head> 41 <body> 42 <div class="wrapper"> 43 <div class="cover"></div> 44 <div class="cover2"></div> 45 <svg:svg> 46 <svg:rect x="0" y="0" width="144px" height="122px" rx="61px" ry="61px" 47 fill="blue"/> 48 <svg:rect x="0" y="18px" width="144px" height="86px" rx="61px" ry="43px" 49 fill="red"/> 50 </svg:svg> 51 <div class="cover"></div> 52 <div class="cover2"></div> 53 <svg:svg> 54 <svg:clipPath id="topclip"> 55 <svg:rect x="0" y="0" width="144px" height="61px"/> 56 </svg:clipPath> 57 <svg:clipPath id="botclip"> 58 <svg:rect x="0" y="61px" width="144px" height="61px"/> 59 </svg:clipPath> 60 <svg:rect x="0" y="0" width="144px" height="122px" rx="61px" ry="61px" 61 fill="black" clip-path="url(#topclip)"/> 62 <svg:rect x="0" y="0" width="144px" height="122px" rx="61px" ry="61px" 63 fill="blue" clip-path="url(#botclip)"/> 64 <svg:rect x="0" y="18px" width="144px" height="86px" rx="61px" ry="43px" 65 fill="red"/> 66 </svg:svg> 67 </div> 68 <div class="wrapper"> 69 <div class="cover" style="width: 142px"></div> 70 <div class="cover2" style="margin-left: -1px; border-radius: 61px / 45px"></div> 71 <svg:svg> 72 <svg:rect x="0" y="0" width="146px" height="122px" rx="61px" ry="61px" 73 fill="blue"/> 74 <svg:rect x="0" y="18px" width="146px" height="86px" rx="61px" ry="43px" 75 fill="red"/> 76 </svg:svg> 77 <div class="cover"></div> 78 <div class="cover2"></div> 79 <svg:svg> 80 <svg:rect x="0" y="0" width="144px" height="122px" rx="61px" ry="61px" 81 fill="black" clip-path="url(#topclip)"/> 82 <svg:rect x="0" y="0" width="144px" height="122px" rx="61px" ry="61px" 83 fill="blue" clip-path="url(#botclip)"/> 84 <svg:rect x="0" y="18px" width="144px" height="86px" rx="61px" ry="43px" 85 fill="red"/> 86 </svg:svg> 87 </div> 88 </body> 89 </html>