| <!DOCTYPE html> |
| <style> |
| body { |
| margin: 0; |
| zoom: 4 |
| } |
| div { |
| border-style: solid; |
| border-width: 20px; |
| width: 0 |
| } |
| .t1 { |
| /* SVG paints a beveled rectangle. */ |
| 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 |
| } |
| .t2 { |
| /* SVG fills top left corner of nine piece image given a 40x40 default object size. */ |
| 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; |
| } |
| .t3 { |
| /* SVG fills top left corner of nine piece image. */ |
| 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; |
| width: 40px; |
| height: 40px; |
| border-bottom-width: 0; |
| border-right-width: 0 |
| } |
| </style> |
| <div class="t1"></div> |
| <div class="t2"></div> |
| <div class="t3"></div> |
