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 |