| OLD | NEW |
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <style> | |
| 3 body { | |
| 4 margin: 0; | |
| 5 zoom: 4 | |
| 6 } | |
| 7 div { | |
| 8 border-style: solid; | |
| 9 border-width: 20px; | |
| 10 width: 0 | |
| 11 } | |
| 12 .t1 { | |
| 13 /* SVG paints a beveled rectangle. */ | |
| 14 border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg
" width="3" height="3"><polygon points="0,1 1,0 2,0 3,1, 3,2 2,3 1,3 0,2" fill="
green"/></svg>') 1 | |
| 15 } | |
| 16 .t2 { | |
| 17 /* SVG fills top left corner of nine piece image given a 40x40 default objec
t size. */ | |
| 18 border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg
" width="40"><rect width="20" height="20" fill="green"/></svg>') 20; | |
| 19 } | |
| 20 .t3 { | |
| 21 /* SVG fills top left corner of nine piece image. */ | |
| 22 border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg
" viewBox="0 0 3 3" width="30" height="30"><rect x="0" y="0" width="1" height="1
" fill="green"/></svg>') 10; | |
| 23 width: 40px; | |
| 24 height: 40px; | |
| 25 border-bottom-width: 0; | |
| 26 border-right-width: 0 | |
| 27 } | |
| 28 </style> | |
| 29 <div class="t1"></div> | |
| 30 <div class="t2"></div> | |
| 31 <div class="t3"></div> | |
| OLD | NEW |